﻿/*
****************************************************************************
*-*-*-* Peralta: MC Catalog Skin - Maverick *-*-*-*
*****************************************************************************
*/

/* 
************************************************************************************
*** Import Links
************************************************************************************ 
*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&family=Roboto:wght@300&display=swap');

/* 
************************************************************************************
*** Root Variables
************************************************************************************ 
*/

:root {

    /* Logo */
	--client-logo: url('/Content/ClientThemes/mc/mc-logo-new.png');
	--client-logo-sm: var(--client-logo);

    /* ****************************************************************************
       ** Colors 
    **************************************************************************** */ 
    /* Primary/Secondary/Accent */
    --theme-main:           #003DA5; /* Merritt Primary-Blue */
    --theme-secondary:      #061552; /* Dark-Blue */

    --theme-bright:         #146FF8; /* Bright-Blue */
    --theme-light-main:     #3498DB; /* Lighter Primary-Blue */
    --theme-accent:         #FFA600; /* Merritt Highlight-Orange */

    --theme-main-pale:      #E1ECFF;
    --theme-main-ltr:       #0048C2;
    --theme-sec-ltr:        #092182; 
    --theme-sec-xdk:        #040E35; 

    /* System Themes */
    --theme-light:          var(--theme-neutral-100);
    --theme-dark:           var(--theme-neutral-900);
    --theme-warning:        var(--theme-accent);

    /* Other Colors */
    --pale-cyan:            #8ED1FC;
    --turquoise:            #00A0A5;
    --lt-green:             #20AE6C;
    --dkr-green:            #1A8D58;
    --dk-green:             #167549;
    --dk-purple-gray:       #0B030F;

    /* Neutral */
	--theme-white:          #FFFFFF;  
    --theme-neutral-100:    #EAEDF0; 
    --theme-neutral-200:    #DDE2E6; 
    --theme-neutral-300:    #CED5DB; 
    --theme-neutral-400:    #AFBAC5; 
    --theme-neutral-500:    #899AA9; 
    --theme-neutral-550:    #7E91A1;
    --theme-neutral-600:    #5D6F80;
    --theme-neutral-700:    #3C4957;
    --theme-neutral-800:    #2B3640;
    --theme-neutral-900:    #181F26;
    --theme-black:          #000000;  

    /* Borders */
	--border-color:         var(--theme-neutral-400);

    /* Theme Font */
	--theme-base-font: 'Raleway';

	/* ******************************************************************
	   * Catalog Header 
	****************************************************************** */ 
    /* Background & Border */
	--header-bg-color: var(--theme-white);
	--header-border-color: var(--theme-main);

    /* Navbar Background & Border */
    --nav-banner-bg-color: var(--theme-dark);
    --nav-top-bg-color: var(--theme-main);

    /* Catalog Title & Subtitle */
    --catalog-title-color: var(--theme-main);
    --catalog-subtitle-color: var(--theme-neutral-550);

    /* PDF Export Link */
    --pdf-export-link-color: var(--theme-main);
    --pdf-export-active-color: var(--theme-bright);

    /* ********************************************************
	   --- Navbar Toggler (Hamburger Menu Button) 
	******************************************************** */ 
    --navbar-toggler-bg-color: var(--theme-white);
	--navbar-toggler-border-color: var(--theme-light);

    /* ********************************************************
	   --- Search Toolbar 
	******************************************************** */         
    /* Search Input Field - Focus Highlight */
    --form-focus-highlight: rgba(0, 61, 165, 0.6);

    /* ****************************************************
       -- Search Buttons
    **************************************************** */
	/* --- Execute Search --- */
    --search-button-bg-color: var(--theme-main);
    --search-button-fg-color: var(--theme-white);
    --search-button-border-color: var(--pale-cyan);
        /* Hover */
    --search-button-hover-bg-color: var(--theme-sec-ltr);
    --search-button-hover-fg-color: var(--search-button-fg-color);
    --search-button-hover-border-color: var(--search-button-border-color);
        /* Focus */
	--search-button-focus-bg-color: var(--search-button-hover-bg-color);
	--search-button-focus-fg-color: var(--search-button-hover-fg-color);
	--search-button-focus-border-color: var(--search-button-hover-border-color);
        /* Active */
	--search-button-active-bg-color: var(--theme-secondary);
	--search-button-active-fg-color: var(--search-button-fg-color);
	--search-button-active-border-color: var(--search-button-border-color);

    /* --- Reset Search --- */
	--search-reset-bg-color: var(--search-button-bg-color);
	--search-reset-fg-color: var(--search-button-fg-color);
	    /* Hover/Focus */
	--search-reset-hover-bg-color: var(--search-button-hover-bg-color);
	--search-reset-hover-fg-color: var(--search-button-hover-fg-color);
	    /* Active */
	--search-reset-active-bg-color: var(--search-button-active-bg-color);
	--search-reset-active-fg-color: var(--search-button-active-fg-color);

	/* --- Highlight Results --- */
    --search-highlight-bg-color: var(--theme-secondary);
	--search-highlight-fg-color: var(--theme-white);
    --search-highlight-border-color: var(--search-button-border-color);
	    /* Hover*/
	--search-highlight-hover-bg-color: var(--theme-sec-xdk);
	--search-highlight-hover-fg-color: var(--search-highlight-fg-color);
	    /* Focus */
	--search-highlight-focus-bg-color: var(--theme-secondary);
	--search-highlight-focus-fg-color: var(--search-highlight-fg-color);
	    /* Active */
	--search-highlight-active-bg-color: var(--theme-sec-xdk);
	--search-highlight-active-fg-color: var(--theme-accent);

    /* --- Toggle Results --- */
	--search-toggle-bg-color: var(--search-button-bg-color);
	--search-toggle-fg-color: var(--search-button-fg-color);
	    /* Hover/Focus */
	--search-toggle-hover-bg-color: var(--search-button-hover-bg-color);
	--search-toggle-hover-fg-color: var(--search-button-hover-fg-color);
	    /* Active */
	--search-toggle-active-bg-color: var(--search-button-active-bg-color);
	--search-toggle-active-fg-color: var(--search-button-active-fg-color);

    /* *********************************************************************
	    --- Search Results
	********************************************************************* */ 
    /* Results Header */
    --search-results-header-bg-color: var(--theme-main);
    --search-results-header-fg-color: var(--theme-white);

    /* Results Count */
    --search-results-count-bg-color: var(--theme-secondary);
    --search-results-count-fg-color: var(--theme-white);

    /* Result Items */
    --search-results-bg-color: var(--theme-white);
    --search-results-fg-color: var(--theme-black);
        /* Hover */
    --search-results-hover-bg-color: var(--theme-neutral-200);
    --search-results-hover-fg-color: var(--theme-black);
        /* Active */
    --search-results-active-bg-color: var(--theme-main-ltr);
	--search-results-active-fg-color: var(--theme-white);

    /* **************************************************************************
	   * Catalog Menu
	************************************************************************** */ 
    /* Menu Items */
	--sidenav-item-fg-color: var(--theme-dark);
	--sidenav-item-active-bg-color: var(--theme-main);
	--sidenav-item-active-fg-color: var(--theme-white);

    /* **************************************************************************
       * Catalog Properties
    ************************************************************************** */

	/* **************************************************************************
	   * Catalog Content
	************************************************************************** */  
    /* Highlighted Text - Marks */
    --mark-bg-color: var(--theme-main-ltr);
	--mark-fg-color: var(--theme-white);
    --mark-border: 1px solid transparent; 

    /* Tabs */
	--tab-bg-color: var(--theme-neutral-200);
	--tab-fg-color: var(--theme-dark);
        /* Active */
	--tab-active-bg-color: var(--theme-white);
	--tab-active-fg-color: var(--theme-main);
        /* Hover */
    --tab-hover-bg-color: var(--theme-main);
    --tab-hover-fg-color: var(--theme-white);

    /* Tab Borders */
    --tab-border-color: var(--theme-neutral-400);
    --tab-bottom-border-color: var(--border-color);
    --tab-active-border-color: var(--border-color);
    --tab-hover-border-color: var(--theme-main);

    /* Tabs: Background Panel */
	--tab-panel-bg-color: var(--theme-white);
    --tab-panel-border-bottom: 1px solid var(--tab-active-border-color);

    /* Tabs: Space Between */
    --tab-gap: 5px;

    /* ******************************************************************
       * Catalog Footer
	****************************************************************** */
	--footer-bg-color: var(--theme-light);
    --footer-fg-color: var(--theme-dark);
}


/* 
************************************************************************************
*** CSS Elements
************************************************************************************ 
*/

/* ****************************************************************************
   ** General
**************************************************************************** */ 
/* All Text */
* {font-family: var(--theme-base-font);}

/* All Links */
a {color: var(--theme-main);}
    a:hover {color: var(--theme-bright);}

/* UL Bullet Points */
ul li::marker {
    color: var(--theme-light-main);
}

ul {
    list-style: disc;
}

/* ****************************************************************************
   ** Catalog Header 
**************************************************************************** */ 
.editor-header {
}

/* ******************************************************************
    * Utility Nav
****************************************************************** */
#utilitynav {
    background-color: var(--nav-banner-bg-color);
    border-bottom: 5px solid var(--theme-accent);
}   

/* *********************************************************
    --- Public - Not Logged In
******************************************************** */    
/* Top Nav */
#utilitynav .navbar.bg-white {

}

/* Login Button */
#login.btn {
    color: var(--theme-black) !important;
}
    #login.btn:hover,
    #login.btn:active {
        color: var(--theme-main) !important;
    }

    #login.btn:focus {
        box-shadow: none;
    }

/* ******************************************************************
   * Primary Nav
****************************************************************** */
#primarynav {
}

/* ********************************************************
    --- Client Logo (Image)
******************************************************** */
.client-logo {
	min-height: 120px;
}

/* ********************************************************
    --- Search Results (Off Canvas)
******************************************************** */
/* Results Header */
.search-results-header{

}

/* Results Count */
.search-results-count {
    background-color: var(--search-results-count-bg-color) !important;
    color: var(--search-results-count-fg-color) !important;
}

/* ********************************************************
    --- Hamburger Menu: Navbar Toggler Button
******************************************************** */
.navbar-toggler {
}

/* ********************************************************
   --- Primary Nav - After Logo (Title, Search, Export)
******************************************************** */
#primary-nav-after-logo {
}

/* ****************************************************
   -- Catalog Title & Subtitle
**************************************************** */
#catalog-title {
	margin-bottom: 0.25rem;
}

#catalog-subtitle {
    margin-bottom: 0.25rem;
    color: var(--catalog-subtitle-color);
}

/* ****************************************************
   -- Search Toolbar
**************************************************** */
/* Search Input Field */
#search-keyword.form-control {
    border: 1px solid var(--theme-neutral-300);
}
    #search-keyword.form-control:focus {
    } /* Set automatically by the form-focus-highlight variable */

/* **********************************************
    - Search Buttons
********************************************** */
/* Execute Search */
#search-execute.btn {
	background-color: var(--search-button-bg-color);
	color: var(--search-button-fg-color);
	border-color: var(--search-button-border-color);
}
	#search-execute.btn:hover {
		background-color: var(--search-button-hover-bg-color);
		color: var(--search-button-hover-fg-color);
		border-color: var(--search-button-hover-border-color);
	}
	#search-execute.btn:focus {
		background-color: var(--search-button-focus-bg-color);
		color: var(--search-button-focus-fg-color);
		border-color: var(--search-button-focus-border-color);
		box-shadow: 0 0 3px 0.125rem rgba(130, 138, 145, 0.5);
	}
	#search-execute.btn:active {
		background-color: var(--search-button-active-bg-color);
		color: var(--search-button-active-fg-color);
		border-color: var(--search-button-active-border-color);
	}

/* Reset Search */
#search-results-reset.btn {
	background-color: var(--search-reset-bg-color);
	color: var(--search-reset-fg-color);
}
	#search-results-reset.btn:hover,
	#search-results-reset.btn:focus {
		background-color: var(--search-reset-hover-bg-color);
		color: var(--search-reset-hover-fg-color);
	}
	#search-results-reset.btn:active {
		background-color: var(--search-reset-active-bg-color);
		color: var(--search-reset-active-fg-color);
	}

/* Highlight Results */
#search-highlight-toggle.btn {
	background-color: var(--search-highlight-bg-color) !important;
	color: var(--search-highlight-fg-color) !important;
}
	#search-highlight-toggle.btn:hover {
		background-color: var(--search-highlight-hover-bg-color) !important;
		color: var(--search-highlight-hover-fg-color) !important;
	}
	#search-highlight-toggle.btn:focus {
		background-color: var(--search-highlight-focus-bg-color) !important;
		color: var(--search-highlight-focus-fg-color) !important;
	}
	#search-highlight-toggle.btn:active {
		background-color: var(--search-highlight-active-bg-color) !important;
		color: var(--search-highlight-active-fg-color) !important;
	}

/* Toggle Results */
#search-results-toggle.btn {
	background-color: var(--search-toggle-bg-color);
	color: var(--search-toggle-fg-color);
}
	#search-results-toggle.btn:hover,
	#search-results-toggle.btn:focus {
		background-color: var(--search-toggle-hover-bg-color);
		color: var(--search-toggle-hover-fg-color);
	}
	#search-results-toggle.btn:active {
		background-color: var(--search-toggle-active-bg-color);
		color: var(--search-toggle-active-fg-color);
	}

/* ****************************************************
   -- Export PDF Link
**************************************************** */
.export-pdf {
}


/* ****************************************************************************
   ** Catalog Menu
**************************************************************************** */ 

/* ******************************************************************
   * Menu Header 
****************************************************************** */
/* Edit Mode off - menu header hides  */
#leftsidemenu > .sidebar-menu-header {
	display: none;
}
    /* Edit Mode on - menu header shows  */
    body.edit-mode #leftsidemenu > .sidebar-menu-header {
	    display: inherit;
    }

/* ********************************************************
   --- +Add Button
******************************************************** */
/* +Add Button (all - not just menu header) */
.btn-success {
    border: none !important;
    background-color: var(--lt-green);
}
    .btn-success:hover {
        background-color: var(--dkr-green);
    }
    .btn-success:focus {
        background-color: var(--dk-green);
        box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
    }
    .btn-success:active {
        background-color: var(--dk-green);
    }

/* +Add Button (menu header only) */
#add-page-6364.btn-success {
}   
    #add-page-6364.btn-success:focus {
    box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 1);
    }
  
/* ********************************************************
   --- Edit Checkbox (menu header only)
******************************************************** */
.form-check-input:checked {
	background-color: var(--theme-bright) !important;
}


/* ******************************************************************
   * Menu Items
****************************************************************** */
.sidebar-menu > li:hover {
	background-color: var(--sidenav-item-hover-bg-color);
    color: var(--sidenav-item-hover-fg-color);
}

/* ****************************************************************************
   ** Catalog Content
**************************************************************************** */ 
#primarycontent > #content-body {
}

/* ******************************************************************
   * Tab Panels
****************************************************************** */
#content-body nav {
}

/* All Tabs in Panel */
#content-body .nav-tabs {
    margin-top: 5px;
    margin-bottom: 10px;
}

/* Tab Links  */
#content-body .nav-tabs .nav-link {
    margin-bottom: -0.8px;
}

/* ******************************************************************
   * Link Lists 
****************************************************************** */
/* Not Auto-Sorted */
.index-list > #nav-tab-null > .nav-item:hover { 
    background-color: var(--theme-light);
}

/* Auto-Sorted (alphanumerical) */
.index-list > .index-block .nav-item:hover {
    background-color: var(--theme-light);
}

/* ******************************************************************
   * Curriculum Panels 
****************************************************************** */

/* ***********************************************************
   --- Curriculum Block: Course Summary (CS)
*********************************************************** */
/* Course Curriculum Presentation Item Wrapper */
.curriculum-presentation-item-wrapper[data-presentation-entity-type-id="1"] {
}

/* Course Curriculum Presentation Item Wrapper - with Warning Box Outline
   (for Approved/In Review courses) */
.curriculum-presentation-item-wrapper[data-presentation-entity-type-id="1"].warning-box-outline {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

/* ****************************************************
   -- CS Div Wrapper
**************************************************** */
.curriculum-presentation-item-wrapper[data-presentation-entity-type-id="1"] > div {
    margin-top: 7px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/* CS Div Wrapper - with Warning Box */
.curriculum-presentation-item-wrapper[data-presentation-entity-type-id="1"] >
.curriculum-presentation-status-warning.warning-box {
    /* Margins & Padding for Warning Box Title */
    margin-top: 0px !important;
    padding-top: 2.5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 5px !important;
    /* Text Settings for Warning Box Title */
    color: var(--theme-white);
    font-size: 16px;
    font-family: Segoe UI Semibold;
    line-height: 1.3em;
}

/* **********************************************
   - CS Content - Entire
********************************************** */
.curriculum-presentation-item-wrapper .custom-course-summary-context-wrapper {
    font-size: 14px;
}

/* *****************************************
   CS Content Block - Entire
***************************************** */
.container-fluid.course-summary-wrapper {
    padding: 0px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--theme-neutral-300);
}

/* CS Content Block Header */
.container-fluid.course-summary-wrapper 
.row:first-child {
    font-size: 15px;
    font-weight: normal; 
    /* Header text should be bold; this is overriding a different setting that 
       renders the header text extra bold or "bolder". 
       Setting font-weight to "bold" still makes text show as extra bold. */
    line-height: 1.4em;
    margin-bottom: 5px;
}

/* CS Content Block - with Warning Box */
.warning-box-outline .container-fluid.course-summary-wrapper {
    padding: 10px;
    padding-top: 0px;
    padding-bottom: 5px;
    border-bottom: none;
}

/* ***********************************************************
   --- Curriculum Block: Program Summary (CBPS)
*********************************************************** */
/* Program Summary/Outcomes - Wrappers */
.program-summary-wrapper .program-outcomes-summary-wrapper {
	display: initial;
}

/* Program Description Wrapper - Block Headers */
.program-description-wrapper > header {
    margin-top: 10px;
}

/* PS Program Description Content */
.program-description-wrapper > div {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--theme-neutral-300);
}

/* Last Paragraph in each PS block - overrides excessive margin-bottom space */ 
.program-description-wrapper p:last-child {
    margin-bottom: 0px !important;
}

/* ***********************************************************
   --- Curriculum Block: Program Requirements (CBPR)
*********************************************************** */
/* All Program Blocks - Main Header */
div.header-subject, 
div.header-title, 
div.header-units {
	background-color: var(--theme-main) !important;
    font-weight: bolder;
}
    /* Subject # */
    .header-subject {
        text-align: left !important;
        padding-left: 2rem !important;
    }
    /* Title */
    .header-title {
        text-align: left !important;
        padding-left: 2rem !important;
    }
    /* Units */
    .header-units {
        text-align: right !important;
    }

/* ****************************************************
   -- CBPR Format - Program Requirement (PReq)
**************************************************** */
/* PReq Block Title Headers */
div.course-block-standard .parent-wrapper[data-has-children="true"] 
> .non-course-row-core-wrapper > .non-course-row-core {
    background-color: var(--theme-main-pale) !important;
}

.non-course-row-core > .left-column,
.non-course-row-core > .right-column {
    font-weight: 600 !important;
}

/* **********************************************
   - PReq Block Content
********************************************** */
/* PReq Block Entry - Group Headers */
.course-block-standard.block-title.parent-wrapper > .child-wrapper {
    margin-top: 0;
}
    /* PReq Block Entry Children */
    .child-wrapper[data-child-type="block-entry-children"] {
        margin-top: 0.25em;
    }

    /* PReq Block Entry - Nested Group Headers */
    .child-wrapper[data-child-type="block-entry-header"] {
        margin-top: 0.5em;
    }

/* PReq Block Row - Program Summary Details */
.Program-Summary-Details p {
    margin-bottom: 2.5px;
} /* Overrides too much spacing between multiple PSD rows */

.Program-Summary-Details div {
    padding-top: 2.5px;
} /* Spaces each PSD row div evenly between bottom-borders */


/* *****************************************
   Block Entry - Course Summary Popover
***************************************** */
.popover {
    border: 1px solid var(--theme-neutral-550);
    box-shadow: 0px 0px 5px rgba(73, 80, 87, 0.7); 
}

/* ************************************
   + Popover Arrow 
************************************ */
/* Pointing Left (Card) - 
   Appearing at Right/End (Text) */
.bs-popover-end > .popover-arrow {
    left: calc(-0.50rem - 9px);
}
    .bs-popover-end > .popover-arrow::before {
        left: 1px;
        border-width: 0.5rem 0.5rem 0.5rem;
        border-right-color: var(--theme-neutral-700);
    }
    .bs-popover-end > .popover-arrow::after {
        left: 2px;
        border-width: 0.5rem 0.5rem 0.5rem;
        border-right-color: var(--theme-white);
    }

/* Pointing Down (Card) - 
   Appearing Above (Text) */
.bs-popover-top > .popover-arrow {
    bottom: -0.50rem;
}
    .bs-popover-top > .popover-arrow::before {
        border-top-color: var(--theme-neutral-700);
    } 
    .bs-popover-top > .popover-arrow::after {
        border-top-color: var(--theme-white);
    }

/* Pointing Up (Card) - 
   Appearing Below (Text) */
.bs-popover-bottom > .popover-arrow {
    top: -0.50rem;
}
    .bs-popover-bottom > .popover-arrow::before {
        border-bottom-color: var(--theme-neutral-700);
    }

/* *******************************
   ++ Popover Header    
******************************* */
.popover-header {
    background-image: var(--bs-gradient);
}

/* *******************************
   ++ Popover Body   
******************************* */
.popover-body {

}

/* Font Size of Course Summary Content */
.popover-body .custom-course-summary-context-wrapper {
    font-size: 13px;
}

/* ****************************************************
   -- CBPR Format - Program Sequence (PSeq)
**************************************************** */
/* PSeq Block Title Wrapper */
.block-title-row-core-wrapper {
	padding-left: calc(15px + 1em);
    margin-top: 0;
}

/* PSeq Block Title Headers */
div.block-title-row-core {
    background-color: var(--theme-main-pale) !important;
}
    /* Title Header - Left Column */
    div.block-title-row-core > .left-column {
        font-weight: 600 !important;
        font-style: italic !important;
    }
    /* Title Header - Right Column */
    div.block-title-row-core > .right-column {
        font-weight: 600 !important;
    }

/* **********************************************
   - PSeq Block Content
********************************************** */
/* PSeq Block Headers */
.child-wrapper[data-child-type="block-header"] {
    margin-top: 0.25em !important;
    padding-left: calc(30px + 1em) !important;
}

/* PSeq Block Children */
.child-wrapper[data-child-type="block-children"] {
    margin-top: 0.25em !important;
    padding-left: calc(30px + 1em) !important;
}


/* ****************************************************************************
   ** Catalog Properties
**************************************************************************** */ 
/* Properties Header */
#rightsidebar div.header {
    background-color: var(--theme-neutral-300);
    color: var(--theme-neutral-700);
}

/* ******************************************************************
   * Properties Tabs
****************************************************************** */
/* All Tabs */
#rightsidebar .nav-tabs {
    gap: var(--tab-gap);
    border-bottom: 1px solid var(--theme-neutral-400);
}


/* Tabs - Background, Border, Text */
#rightsidebar .nav-tabs > .nav-item > .nav-link {
    background-color: var(--theme-neutral-300);
    border-color: var(--theme-neutral-400);
    border-bottom: 1px solid var(--theme-neutral-400);
    color: var(--theme-black);
}
    #rightsidebar .nav-tabs > .nav-item > .nav-link:hover {
        background-color: var(--theme-main-ltr);
        color: var(--theme-white);
        border-color: var(--theme-main-ltr);
    }    

    #rightsidebar .nav-tabs > .nav-item > .nav-link.active {
        background-color: var(--theme-main-ltr);
        color: var(--theme-white);
        border-color: var(--theme-main-ltr);
    }

/* My Tasks Tab - Background, Border, Text */
#my-tasks.bg-primary {
    background-color: var(--theme-bright) !important;
    border-color: var(--theme-bright) !important;
}

#my-tasks.text-light {

}

/* ****************************************************************************
   ** Catalog Footer
**************************************************************************** */ 
#catalog-footer {

}