/*
COCC main css file

1. Google Fonts
2. Text Colors
3. List Types
4. Images
5. General formatting
6. Footer
7. Header
8. Directory and Employee pages
9. Left Nav
10. Global Nav
11. Typography
12. Search Results
13. Google Map
14. General Procedure Manual
15. Scroll To Top
16. Login page login links
17. Forms
18. Home Page Slider
19. Academic Pages
20. Component Specific
*/

/* 1. Google Fonts */

/* JM- Moving font imports from foundation css to here. We shouldn't be making customizations to foundation core. - 01/24/2023 */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css");

/* JM- Adding 'din-condensed-variable' for h1 with background - 10/10/2023 */
@import url("https://use.typekit.net/pmb1ykx.css");


body {
	font-family: 'Poppins', sans-serif;
}

.TextTagline
{
    font-family: 'Josefin Sans', sans-serif;
}
.TextTaglineSmall
{
    font-size: 1.5em;
}
.TextTaglineMedium
{
    font-size: 2.5em;
}
.TextTaglineLarge
{
    font-size: 3.5em;
}
/* End Google Fonts */

/* 2. Text Colors */
.ColorTextBlue
{
    color: #2b637f;
}
.ColorTextDarkGrey
{
    color: #333333;
}
.ColorTextLightGrey
{
    color: #666666;
}
.ColorTextDarkRed
{
    color: #990000;
}
/* End Text Colors */

/* 3. List Types */
.NumericList
{
    list-style-type: decimal;
}
.LowerRomanList
{
    list-style-type: lower-roman;
}
.LowerAlphaList
{
    list-style-type: lower-alpha;
}
.UpperRomanList
{
    list-style-type: upper-roman;
}
.UpperAlphaList
{
    list-style-type: upper-alpha;
}
.CircleList
{
    list-style-type: circle;
}
.SquareList
{
    list-style-type: square
}
.DiscList
{
    list-style-type: disc;
}
.NoneList
{
    list-style-type: none;
}
.NoneListLeft
{
    list-style-type: none;
    margin-left:0;
    line-height:1.3rem;
}
.NoneListLeft li 
{
    margin-bottom:.9rem;
}
/* End List Types */

/* 4. Images */
.imgtextleft
{
    float: right;
    margin-left: 1em;
    margin-bottom: 1em;
}
.imgtextright
{
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
}

/* Rounded Corners for WYSIWYG editor */
.rc-large {
    border-radius: 16px;
    overflow: hidden;
    width: fit-content;
}
.rc-small {
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
}

/* header logo */
 .logoMain-container {
    display: inline-block;
    position: relative;
    width: 50%;
    height:100%;
    padding-bottom: 15%;
}
.logoMain {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height:100%
}

/* footer logo */
 .logoCircle-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 10%;
    vertical-align: middle;
}
.logoCircle {
/*  display: block;*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  max-height:100%;*/
    max-width:80px;
}

/* End Images */

/* 5. General formatting */
.floatLeft {
    float: left;
}
.floatRight {
    float: right;
}
.clear {
    clear: both;
}
#breadcrumbMenu {
    margin-top:.5rem;
}
.breadcrumbs li {
	/* BCs were a tad small with poppins font and 11px, more visible and better for usability tap targets. */
    font-size: .8rem;
	text-transform: none;
}

.text_left
{
    text-align: left;
}
.text_center
{
    text-align: center;
}
.text_right
{
    text-align: right;
}
.text_justify
{
    text-align: justify;
}
.ShowHideTrigger
{
    color: #06c;
    cursor: pointer;
    text-decoration: underline;
}
.ShowHideHidden
{
    padding: 0px;
    margin: 0px;
}
table
{
	border-collapse: collapse;
}

/* ENS Banner */
.ens-alert {
    border: 3px solid red; 
    margin-bottom:.85rem;
	margin-top: 10px;
}
.ens-alert h3 {
    font-size: 1.1rem;
    font-weight:bold;
    margin:.2rem 0;
    text-transform:uppercase;
}
.ens-alert p { 
    line-height:1.1rem;
    margin-bottom:.5rem !important;
    margin-top:0 !important;
}
.ens-alert img.alertimage {
     float:right;
}
#heroImage {
    margin-top:1rem;
    margin-bottom:1.2rem;
}
.button {
    border-radius:3px;
}
/* Event Listings */
.event-section-container {
    padding: .5rem;
}
.event-section-title {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 1rem;
}
.event-section-title .event-section-name {
    /* margin-left: 1rem; */
}
.event-section-title .event-section-name p {
    margin-bottom: .4rem;
    font-size: .85rem;
    line-height: .8rem;
}

/* News Listings */
.news-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-start;
        -ms-flex-align: flex-start;
            align-items: flex-start;
    margin-bottom: 1.3rem;
    border-bottom: 1px solid #d3d3d3;
}
.news-container h5 {
    margin-bottom: .2rem;
}
.news-container .news-text {
    margin-left: 1rem;
} 
.news-container .news-text p {
    margin-bottom:.7rem;
    padding-bottom:.5rem;
    font-size: .95rem;
    line-height: 1.2rem;
}

/* simplified news list BETTER */
.newslist {
    margin-bottom: 1.3rem;
}
.newslist .newsintro {
    margin-left:1rem;
    margin-bottom:1.2rem;
}
.newslist img {
    margin-bottom:.5rem;
}
.newslist .newsdateloc {
   font-size:.85rem;
   margin-top:0;
   margin-bottom:.2rem;
   line-height: 1.1rem;
}
.newslist .newssummary {
   line-height: 1.3rem;
   margin-top:.3rem;
   margin-bottom:.2rem;
}

/* columns and sidebar aside blocks */
#main-content {
    height:auto;
    padding-top:1.3rem;
    min-height: 65.0vh;
}
#sidebar-left {
/*  background:#efefef;  /* temp for visual */
    border-right: 1px solid #ccc; 
    margin:0;
    padding-top:1.3rem;
}
#sidebar-right {
 /*     background:#efefef; /* temp for visual */
    border-left: 1px solid #ccc;
    margin:0;
    padding:0 1.3rem;
}
.leftAside2 {
    border:1px solid #999; /* temporary border for visual aid */
    margin:1rem 0;
    padding:.75rem .6rem 0;
}
.rightAside1 {
    border:1px solid #999; /* temporary border for visual aid */
    margin:1rem 0;
    padding:.75rem .6rem 0;
}
.rightAside2 {
    border:1px solid #999; /* temporary border for visual aid */
    margin:1rem 0;
    padding:.75rem .6rem 0;
}
/* For keeping footer at bottom */
main {
    height: auto;
    min-height: 67.1vh;
    /*    min-height: 59.1vh;*/
    /*    min-height: 58.6vh;*/
    max-width: 1280px;
    margin: 0 auto;
}

/* Container for quick and easy responsive YouTube embeds (https://embedresponsively.com/) JM 2-13-23 */

.embed-container {
	position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;
} 

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


/* JM 6/13/23 - Bug wouldn't size down tables for responsive tables causing side scrolling. This seems to fix tables within .table-scroll divs by changing display to grid. */
.table-scroll {
	display: grid;
}

/* End General formatting */

/* 6. Footer */
@media (max-width: 582px) {
    .footerTab {
        display: block;
    }
    #footerLinks span {
        background-color: #888888;
        line-height: 2.5em;
        font-size: 1.5em;
        padding-left: 10px;
        margin-top: 0;
        margin-bottom:.2rem;
    }
    #footerLinks .footerTab-links {
        display: none;
    }
    #footerLinks .footerTab:after
    {
        content: "+";
   		padding: 0;
		position: relative;
		right: 10px;
		float: right;
		font-size: 2.5em;
    }
    #footerLinks .footerTab_active:after
    {
        content: "-";
    }
}
.ftr_College {
    font-size: 0.9rem;
    font-weight: 600;
}
#ftr_Copyright {
    font-size: 0.7rem;
    padding:.5rem 0;
}
.footerAddress {
     margin:0 0 .75rem; 
 }
.footerBottomLink {
    font-size: 0.8rem;
}
#footerLinks {
    font-size: 0.9em;
}
#footerLinks span {
 /* font-size: 12px; is this needed since we use rem size below? */
    font-size: 0.9rem;
    text-align: left;
}
#footerLinks li {
    list-style: none;
    text-align: left;
    margin-left: -15px;
}
#div_PtrInst {
    margin: .8rem 0 .5rem;
}
#spn_PtrInst {
    font-size: 0.7rem;
}
/* footer full width gray background white text */
.footerRow {
    background-color:#666; 
    border-top:6px solid #5b778b;
    width:100%;
    margin: 3rem auto 0; /* JM - 1/4/2024 - content was touching footer. Often resolved with blank paragraph, which was inconsistent and unsustainable */
    padding:.85em;
    color:#fff;
    font-size: 0.9em;
}
.footerRow a:link, .footerRow a:active, .footerRow a:visited {
    color:#fff;
}
.footerRow a:hover {
    text-decoration:underline;
}
/* End Footer */

/* 7. Header */
/* gradient top to bottom */
.headerBckgd {
    background-color:#b3c8e2; /* fallback for IE */
    background-image:
    linear-gradient(
      #eef2f8, #b3c8e2
    );
}
/* intranet header  */
.headerBckgdInt {
    background-color:#fff; /* white for intranet */
}
.headerInnerBckgd {
    background-image:none;
}
@media only screen and (min-width: 50em)
{
    .headerInnerBckgd
    {
        background-image:  url("/_resources/images/hdr-mtns-trnsp-sm.png");
        background-repeat:no-repeat;
        /*background-position:right 1.5em bottom;*/
        background-position: bottom;
    }
}

/*-- css from header organism file --*/
#logo_home {
    max-width: 170px;
}
.title-bar {
background:transparent;
}

/* move toplinks and search to top of header*/
.title-bar-right {
	transform: translateY(-40%);
}
.searchbox-input {
    top:0;
    right:0;
    border: solid 1px #ccc;
    outline:0; 
    width:100%;
    margin:0;
    padding:0px 40px 0px 10px;
    -webkit-border-radius: .2em;
	-moz-border-radius: .2em;
	border-radius: .2em;
}
.searchbox-icon {
    display:block;
    position:absolute;
    top:6px;
    right: 10px;
    border:0;
    outline:0;
    text-align:center;
    cursor:pointer;
}
@media only screen and (max-width: 56.14em) {
    .title-bar-right {
        transform: translateY(0);
    } 
}

.top-bar {
background:transparent;
}

.top-bar-right .menu {
top: 0;
transform: translateY(-50%);
right: 0; 
background-color:transparent;
}
.searchbox-icon {
    top: 7px; 
}
.icon-search {
    margin-right: 10%;
}
#show_search {
    display: none;
}
#show_search.show_search {
    display: block;
    position: absolute;
    top: 70px;
    width: 100%;
    z-index: 200;
}
.searchbox {
    position: relative;
    margin: 0 auto;
    width: 80%;
}

@media only screen and (max-width: 50em) {
    .top-bar-right .menu {
        transform: translateY(0);
        /* background-color:white; */
    } 
}

@media (min-width: 641px)
{
    #logo_home
    {
        max-width: 340px;
    }
    .icon-search {
        /*float:right;*/
        display: none;
    }
    #show_search.show_search
    {
        display: none;
    }
    .headerNav span
    {
        display: block;
    }
    .headerNav > div
    {
        flex-direction: column;
        font-size: 0.78rem;
    }
    .headerNav > div > div
    {
        padding: 0.25rem;
    }

}
@media (min-width: 900px)
{
    .headerNav > div
    {
        flex-direction: row;
    }

}
.search-icon-text {
color:#333;
font-size:1.2em;
}

/* End Header */

/* 8. Directory and Employee pages*/
.divDirIndName
{
    font-weight: bold;
}
.divDirIndPhoto
{
    order: 2;
}
@media (min-width: 582px)
	{
		#buildings
		{
			column-count: 2;
		}
		.dirColCount4
		{
			-moz-column-count: 2;
			-webkit-column-count: 2;
			column-count: 2;
		}
	}
@media (min-width: 742px)
	{
		#buildings
		{
			column-count: 4;
		}
		.dirColCount4
		{
			-moz-column-count: 4;
			-webkit-column-count: 4;
			column-count: 4;
		}
	}
@media (min-width: 582px)
{
    .divDirIndPhoto
    {
        order: 0
    }
}
.EmployeeDetailSmail td
{
	padding: 0;
}
@media (max-width: 742px)
	{
		.divDirIndPhoto img
		{
			max-width: 15%;
		}
	}
.divDirIndPhoto
{
	display: none;
}
/* End Directory and Employee pages*/

/* 9. Left Nav */
.leftNavHeaderul, .firstlevel 
{
    margin: 0;
    list-style-type: none;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

.leftNavHeaderul > li, .firstlevel  > li
{
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}
.leftNavHeaderul > li > a, .firstlevel  > li > a
{
    display: block;
    padding: 0.7rem 1rem;
    line-height: 1;
}

.leftNavHeaderul input,
.leftNavHeaderul select,
.leftNavHeaderul a,
.leftNavHeaderul button 
{
    margin-bottom: 0;
}

.leftNavHeaderul > li, .firstlevel > li
{
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
}

.leftNavHeaderul > li > a, .firstlevel > li > a
{
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.leftNavHeaderul a, .firstlevel a
{
    color: #0a0a0a;
    padding-left:.5rem;
	/* JM - 06/27/23 - Fix for sub navs with 2 linees had a weird stagger, where line #2 started to the left of line #1 */
	display: block;
}

.leftNavHeaderul a:hover, .firstlevel a:hover
{
    color: #0f73b7;
}
.firstlevel > li a:hover, .secondlevel > li:hover
{
   background:#dfdfdf;
}
.leftNavHeader
{
    background: #a5bdd9;
}
.leftnav_expanderHead, .leftnav_header
{
    position: relative;
}
.leftnav_expanderHead
{
    line-height: 41px;
    font-weight: bold;
}
.leftnav_expanderHead > span > span
{
    line-height: 1.65;
}
.leftnav_expander
{
    flex: 0 0 50px;
    border-left: 1px solid #dfdfdf;
    /* height: 41px; */
	/* JM - 6/27/23 fix for two liners that weren't stretching the dropdown all the way down to the bottom of the clickable area, leaving a gap */
	height: 100%;
    position: absolute;
    right: 0;
    padding: 0 0 0 0.4rem;
    border-bottom: 0;
    /*background-color: #f9f9f9;*/
    font-size: 2rem;
	cursor: pointer;
}
.leftnav_expanderText
 {
    display: block;
    color: #666;
    font-size: 1.4rem;
    padding-top: .2rem;
    margin-right: .5rem;
 }
 .leftnav_header
 {
     /*height: 41px;*/
 }
 .leftnav_header a
 {
     display: block;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
	 /* JM - 06/27/23 no built in padding for the dropdown carrot, which caused menu items to run underneath. */
	 padding-right: 2rem;
 }
.headExpanded .leftnav_expanderText, .leftnav_active .leftnav_expanderText
{
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        -o-transition: -o-transform 0.3s;
        -ms-transition: -ms-transform 0.3s;
        transition: transform 0.3s;

    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.firstlevel
{
    display: none;
}
.leftnav_item
{
    border-top: 1px solid #dfdfdf;
    list-style-type: none;
}
.secondlevel
{
    display: none;
    list-style-type: none;
    margin-left: 0;
}
.secondlevel ul
{
    list-style-type: none;
}
.secondlevel li
{
    padding: 0.2rem 0 0.2rem 20px;
}
.firstlevel ul.bodyExpanded
{
    display: block;
}
/*.MenuHighlighted > div > a:first-child
{
    background-color: #A7BDD6;
    color: #003366;
} */
.MenuHighlighted
{
    background-color: #A7BDD6;
    color: #003366;
}

@media only screen and (min-width: 721px)
{
    .leftNavHeader
    {
        display: none;
    }
    .firstlevel
    {
        display: block;
    }
}
/* End Left Nav */

/* Global Nav */
.offcanvas-full-screen {
position: fixed;
z-index: 1;
transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
background: #ffffff;
top: 70px; /* Change this to be the height of the header*/
/*top: 140px;*/ /* Change this to be the height of the header*/
/*  top: 0;*/
left: 0;
/*right: -382px;*/
width: 100%;
height: 100%;
-webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
        transform: translateX(-100%);
overflow-y: auto;
}

[data-whatinput='mouse'] .offcanvas-full-screen {
outline: 0;
}

.offcanvas-full-screen.is-transition-overlap {
z-index: 11;
}

.offcanvas-full-screen.is-transition-overlap.is-open {
/*box-shadow: 0 0 10px rgba(10, 10, 10, 0.7);*/
}

.offcanvas-full-screen.is-open {
-webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
        transform: translate(0, 0);
}

.offcanvas-full-screen.is-open ~ .off-canvas-content {
-webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
        transform: translateX(100%);
}

.offcanvas-full-screen.is-transition-push::after {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 1px;
/*box-shadow: 0 0 10px rgba(10, 10, 10, 0.7);*/
content: " ";
}

.offcanvas-full-screen.is-transition-overlap.is-open ~ .off-canvas-content {
-webkit-transform: none;
    -ms-transform: none;
        transform: none;
}

.offcanvas-full-screen-inner {
padding: 1rem;
/*text-align: center;*/
}

.offcanvas-full-screen-menu {
margin: 0;
list-style-type: none;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
-webkit-align-items: center;
    -ms-flex-align: center;
        align-items: center;
width: 100%;
-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.offcanvas-full-screen-menu > li {
-webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
}

[data-whatinput='mouse'] .offcanvas-full-screen-menu > li {
outline: 0;
}

.offcanvas-full-screen-menu > li > a {
display: block;
padding: 0.7rem 1rem;
line-height: 1;
}

.offcanvas-full-screen-menu input,
.offcanvas-full-screen-menu select,
.offcanvas-full-screen-menu a,
.offcanvas-full-screen-menu button {
margin-bottom: 0;
}

.offcanvas-full-screen-menu > li {
-webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
        flex: 0 0 100%;
max-width: 100%;
}

.offcanvas-full-screen-menu > li > a {
-webkit-justify-content: flex-start;
    -ms-flex-pack: start;
        justify-content: flex-start;
-webkit-align-items: flex-start;
    -ms-flex-align: start;
        align-items: flex-start;
}

.offcanvas-full-screen-menu a {
color: #0a0a0a;
}

.offcanvas-full-screen-menu a:hover {
color: #b2b2b2;
}

.offcanvas-full-screen-close {
color: #fefefe;
font-size: 5rem;
}

.offcanvas-full-screen-close:hover {
color: #b2b2b2;
}

/* OUR STUFF */
.subnav
{
    display: none;
    list-style-type: none;
}
.subnav ul
{
    list-style-type: none;
}
#navigation
{
    list-style-type: none;
}
.nav_header
{
    position: relative;
}
.nav_expander
{
    /*width: 50px;*/
    flex: 0 0 50px;
    border-left: 1px solid #dfdfdf;
    /*height: 51px;*/
    position: absolute;
    /*top: -10px;*/
    right: 0;
    padding: 0 0 0 0.4rem;
    border-bottom: 0;
    /*background-color: #f9f9f9;*/
    font-size: 2rem;
}
.nav_expanderText
 {
     display: block;
 }
.menu_active .nav_expanderText
{
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        -o-transition: -o-transform 0.3s;
        -ms-transition: -ms-transform 0.3s;
        transition: transform 0.3s;

    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.nav_header a
{
    flex-grow: 2;
}
#navigation li a
{
    display: block;
    /* width: 90%; */
    height: 44px;
}
#navigation a:focus
{
    outline: none;
}
.nav_item
{
    border-top: 1px solid #dfdfdf;
}
/* End OUR STUFF */
@media (min-width: 641px)
{
    .offcanvas-full-screen 
    {
        position: relative;
        -webkit-transform: translateX(0%);
            -ms-transform: translateX(0%);
                transform: translateX(0%);
        box-shadow: none;
        top: auto;
        right: auto;
        overflow: visible;
        background-color: #2C5367;
        border-bottom:3px solid #5b778b;
    }
    .offcanvas-full-screen.is-transition-overlap.is-open
    {
        position: relative;
        -webkit-transform: translateX(0%);
            -ms-transform: translateX(0%);
                transform: translateX(0%);
        box-shadow: none;
    }
    .offcanvas-full-screen-inner {
        padding: 0.5rem 0;
        /*text-align: center;*/
    }

    .nav_header
    {
        text-align: center;
    }
    .nav_expander
    {
        display: none;
    }
    #navigation 
    {
        position: relative;
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }
    #navigation > .nav_item
    {
        /* flex: 1; */
		/* JM - switched from 'flex: 1;' to 'flex: 1 1 auto;' to base item size on content rather than equal widths. */
		flex: 1 1 auto;
        font-size: 0.88rem;
        border: none;
    }
    #navigation li:hover ul, li.over ul
    {
        /* lists nested under hovered list items */
        display: block;
        float: left;
    }
/*    #navigation ul li*/
    .topnav ul li
    {
        float: left;
        position: relative;
        margin: 0;
        /*padding: 0 25px 0 0px;*/
        font-size: .8em;
        display: block; 
        list-style: none; 
        width: 100%;
    }
    #navigation li a
    {
        height: auto;
    }

    /*#navigation li ul*/
    .subnav
    {
        list-style: none;
        position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
        /*background-color: #C2CEDE;*/
        margin: 0;
        padding: 0;
        float: left;
        /*width: 170px; */
        width: 40%;
        font-size: 1.3rem;
        border: solid #2C5367 1px;
        background-color: #fefefe;
    }
    .subnav li
    {
        /*border: solid #2C5367 1px;*/
    }
    #navigation .subnav li a
    {
        font-size: 0.9rem;
        /* padding-left: 10px; */
        padding: 5px 0px;
    }
    .menu-icon.dark, .offcanvas-full-screen-close
    {
        display: none;
    }
    .globalNavTopNav
    {
        display: none;
    }
    .megaleft, .megacenter, .megaright
    {
        float: left;
        display: block;
        margin-left: 0;
        margin-top:1.3rem;
        margin-bottom:1.2rem;
    }
    .megacenter, .megaright
    {
        float: left;
        display: block;
        margin-left: 0;
        border-left: solid #ccc 1px;
    }
    .subnav .megacenter li, .subnav .megaright li
    {
        margin-bottom:.6rem;
    }
    .subnav .megaleft li
    {
        margin-bottom: 1rem;
        background:#2b637f;
        border-radius:3px;
        padding:.5rem;
        border:none;
        text-align:center;
        line-height:1.2em;
    }
    .subnav .megaleft li a {
        color:#fff;
    }
    .subnav .megaleft li:hover {
        filter: brightness(115%);
    }
    .right-menu
    {
        /*margin-left: auto;*/
        right: 0;
    }
/*    .navCTAColumn
    {
        display: flex;
        justify-content: center;
        align-items: center;
    }*/
    .topnav a
    {
        color: #ffffff;
    }
        .subnav a
    {
        color: #0a0a0a;
    }

}

/* End Global Nav */

/* 11. Typography */
.BoldTitle
{
    font-size: 1.2em;
    line-height: 1.1;
    padding: 0;
    margin-bottom: -10px;
    font-weight: bold;
}
.alth1 {
  font-size: 1.5rem;
  line-height: 1.4;
  display: block;
  }

.alth2 {
  font-size: 1.25rem;
  line-height: 1.4;
  display: block;
  }

.alth3 {
  font-size: 1.1875rem;
  line-height: 1.4;
  display: block;
  }

.alth4 {
  font-size: 1.125rem;
  line-height: 1.4;
  display: block;
  }

.alth5 {
  font-size: 1.0625rem;
  line-height: 1.4;
  display: block;
  }

.alth6 {
  font-size: 1rem;
  line-height: 1.4;
  display: block;
  }

/* Testing of customized H1 using Google font */
h1 {
    font-family: 'Josefin Sans', sans-serif;
 /*   font-size:2.1rem; adjust header sizes in settings */
    text-transform: uppercase;
    color:#555;
}
.sectionHeadline {
    font-size:1.6rem; /*set this for h3 in global setting */
    color: #666;
    border-bottom:1px solid #999;
    margin-bottom:1.1rem;
}
.stepBadge
{
	font-size: inherit;
}
.adm-header-hr
{
	margin: 0.4rem 0 0.4rem 0;
}
.key-icon 
{
	background-color: #4C6AA1; 
	background: radial-gradient(at left top , #7F9ABF, #2D4C8F) repeat scroll 0 0 #2D4C8F; 
	border-radius: 3px; color: #fff;  
	height: 17px;    
	margin: 0 4px 5px 0;
	min-width: 25px;
	padding: 0 5px;
	text-align: center;font-size:0.9em;
}        
.key-icon3 
{
	background-color: #6A675E; 
	background: radial-gradient(at left top , #aaaaaa, #474334) repeat scroll 0 0 #474334; 
	border-radius: 3px; color: #fff;  height: 17px;    
	margin: 0 4px 5px 0;
	min-width: 25px;
	padding: 0 5px;
	text-align: center;
	font-size:0.9em;
}
.accordion-snippet li .accordion-title
{
	font-size: 1.23rem;
	line-height: 1.25em;
}

blockquote footer, blockquote cite {
	font-size: 1rem;
}

/* anchor/jump links */
html, body {
	scroll-behavior: smooth;
}

#main-content a:not([href]):not(.button) {
	color: inherit;
	cursor: inherit;
}

/* End Typography */

/* 12. Search Results */
.facets h3 {
    margin-bottom:0;
}
.facets ul {
    list-style: none;
    list-style-image: none;
    margin-left:.65rem;
    padding-left: 0; 
}
.searchResults ul {
    list-style: none;
    list-style-image: none;
    margin-left: 0;
    padding-left: 0;
}
.searchResults h5 {
    margin-top:.65rem;
    margin-bottom: 0;
}
#results li.result .result-info {
    color: #888888;
    line-height:.85rem;
}
/* Best Bet Results display */
.searchSuper  {
    padding-bottom:1rem;
    border-bottom:1px solid #ccc;
}
.searchSuper h2 {
    font-size: 1.2rem;
    margin-bottom:0;
    margin-top:.7rem;
}
.searchSuper p {
    margin-bottom:0;
    margin-top:0;
}
@media only screen and (max-width: 741px) {
    #search-results>#sidebar-left 
	{
        order: 1;
    }
}
/* End Search Results */



/* 

JM Adding for Google programmable search engine 3/25/24

*/



/*****
** Global CSS - Migrate to main CSS or remove
*****/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap');

:root {
    --font: "Poppins", sans-serif;
    --dark-blue: #2C5367;
    --bright-blue: #0f73b7;
    --light-blue: #98AEC8;
    --gray: #666666;
    --green: #395c10;
    --input-height: 53px;
    --border-radius: 6px
}

/*****
**
** Common Search Form CSS
** [id^="___gcse_"] is a common pattern for the outermost div wrapper id
** Classes are repeated on different elements, so use element.selector syntax, e.g., div.gsc-control-cse
**
*****/

/****
** Resets
****/

/* Nuclear
[id^="___gcse_"] * { all: unset;}
*/
div.gsc-control-cse {border: 0; padding: 0;}
table.gsc-search-box {margin-bottom: 0;}
[id^="___gcse_"] table {margin: 0;}
[id^="___gcse_"] tbody {background-color: transparent; border: 0;}
table.gsc-search-box td.gsc-input {padding: 0;}
div.gsc-input-box {background-color: transparent;border: 0;}
table.gsc-input {margin-bottom: 0;}
td.gsib_a, td.gsib_b, div.gsst_b, a.gsst_a {padding: 0;}

/****
** Main Search Box
****/

td.gsc-input {
    background-color: #fff;
    border-bottom: 4px solid var(--dark-blue) !important;
}

/* Search Input Field */
input.gsc-input {
    background-image: none !important;
    box-shadow: none;
    color: var(--bright-blue);
    font-weight: bold;
    font-size: 1.5rem;
    padding: 1rem !important;
    padding-left: .5rem !important;
}

input.gsc-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 150, 214, 0.5);
}

/* Clear Results */
span.gscb_a {
    color: var(--gray) !important;
    font-size: 1.75rem;
    margin: 0 .5rem;
}

span.gscb_a:hover {
    color: #000 !important;
}

a.gsst_a:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 150, 214, 0.5);
}


/* Submit Button (magnifying glass) */
button.gsc-search-button {
    background-color: transparent !important;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 1rem;
}

button.gsc-search-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 150, 214, 0.5);
}

button.gsc-search-button svg {
    fill: var(--dark-blue);
    transform: scale(2.5);
}

button.gsc-search-button:hover svg {
    fill: var(--bright-blue);
}


/* Autocomplete Table */

table.gsc-completion-container tr {
    background-color: #fff !important;
}

table.gsc-completion-container td {
    padding: 0.25rem !important;
    color: var(--gray);
}

table.gsc-completion-container td:hover {
    color: var(--bright-blue);
    cursor: pointer;
}

table.gsc-completion-container tbody {
    border: 0;
}

table.gsc-completion-container img {
    display: none;
}

/* Refinements */

div.gsc-refinementsArea {
    display: none;
}

@media screen and (min-width: 40em) {
	div.gsc-refinementsArea {
		display: block;
	}
}


div.gsc-refinementsArea {
    margin: 1.5rem 0;
}

.gsc-refinementBlock {
    border: 0 !important;
    display: flex;
	flex-wrap: wrap;
}

.gsc-refinementBlock  > * {
    flex-grow: 1;
    text-align: center;
}

.gsc-refinementHeader.gsc-refinementhActive {
    border-bottom: 2px solid var(--bright-blue) !important;
    color: var(--bright-blue) !important;
}

.gsc-refinementHeader.gsc-refinementhInactive {
    color: var(--gray);
}

.gsc-refinementHeader.gsc-refinementhInactive:hover {
    color: var(--bright-blue)  !important;
}

.gsc-refinementsArea {white-space: normal;} /* no-wrap was causing overflow issues on mobile */


/* Results Info */

div.gsc-above-wrapper-area-container {border: 0;}
td.gsc-result-info-container {padding: 0;}
div.gsc-result-info {padding-top: 0 4px;}


/* Results */
.gsc-above-wrapper-area {
    border-bottom: none;
}

div.gsc-webResult {
    margin-bottom: .5rem !important;
}

div.gsc-table-result {
    margin-top: .25rem !important ;
}

a.gs-title {
    color: var(--dark-blue) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    text-decoration: none;
}

.gs-title b {
    color: var(--dark-blue) !important;
    font-size: 1.25rem !important;
}

a.gs-title:hover,
a.gs-title:hover b {
    color: var(--bright-blue) !important;
    text-decoration: underline;
}

.gs-webResult div.gs-visibleUrl,
.gs-visibleUrl-breadcrumb {
    color: var(--green) !important;
}

.gs-snippet {
    font-size: 1rem;
    color: var(--gray);
}

/* Pagination and footer */

div.gsc-cursor-page {
    font-size: 1.25rem;
    font-weight: 600;
    margin-right: 1.5rem !important;
}

div.gsc-cursor-current-page  {
    border-bottom: 2px solid var(--bright-blue);
    color: var(--bright-blue);
}

div.gcsc-find-more-on-google {
	display: none !important;
}

div.gcsc-more-maybe-branding-root, 
div.gcsc-branding {
	margin-top: 2rem;
	
	/* We may need to show for Google's TOS
	display: none !important;
	*/
}

/****
** Header Search Box
****/

header .gsc-control-searchbox-only {
    margin-left: 2rem !important;
}

header .gsc-search-box {
    border-collapse: separate;
    border-spacing: 0;
}

header td.gsc-input {
    background-clip: padding-box;
    border: 1px solid var(--gray) !important;
    border-radius: .2rem !important;
    box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
    margin-left: 1rem;
}

header input.gsc-input {
    background-color: transparent;
    border: 0;
    color: var(--gray);
    font-size: 1rem;
    font-weight: normal;
    padding: .3rem !important;
}

header button.gsc-search-button svg {
    transform: scale(2);
}

/* Hide autocomplete, as api method is not working: https://developers.google.com/custom-search/docs/tutorial/autocomplete */
header table.gstl_50.gssb_c {
    display: none !important;
    visibility: hidden !important;
}

/****
** Mobile Header Search Box
****/
/* 
header #show_search.show_search {
	background-color: rgba(44, 83, 103, .9);
    height: 100%;
    width: 100%;
    left: 0;
    padding: 2rem;
    position: absolute;
    top: 61px;
}
*/

header #show_search.show_search button.gsc-search-button svg {
    fill: #fff;
}

header #show_search.show_search button.gsc-search-button:hover svg {
    fill: var(--grey);
}

/* 

END JM Adding for Dev Enviro 3/4/2-24 Will be moving and trimming thoughout launch

*/




/* 13. Google Map */
#map-canvas {
    height: 600px;
    width: 100%;
}

#map-layers {
    background: #ffffff;
    border: solid 1px #000;
    margin-right: 10px;
    width: 245px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    position: fixed;
    top: 300px;
    right: 50px;
    z-index: 2;
}

#divOptions {
    background: #fff;
    margin-top: 6px;
    width: 75px;
    border: 1px solid black;
    text-align: center;
    height: 17px;
    display: block;
}

[title=Show\ 45\ degree\ view], [title=Zoom\ in\ to\ show\ 45\ degree\ view], [title=Zoom\ in\ to\ show\ 45-degree\ view] {
    display: none !important;
}

.LegendItems {
    list-style: none;
    padding-left: 0;
    text-align: left;
}

.subLegendItems {
    list-style: none;
    padding-left: 15px;
    text-align: left;
    margin-bottom: 0;
}

    .subLegendItems input {
        margin-left: 0;
    }

.lgndBox {
    display: inline-block;
    height: 10px;
    width: 10px;
    border: 1px solid black;
    margin-bottom: 0.1rem;
    padding-bottom: 0.55rem;
}
#divMapOptionsClose
{
	/*border: 1px solid black;*/
	width: 20px;
	height: 20px;
	display: inline-block;
	float: right;
	position: relative;
}
#spanCloseOptions
{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.ParkingList label, .TransList label
{
    display: inline-block;
}

.student {
    background-color: #95B769;
}

.faculty {
    background-color: #A4D6E8;
}

.resident {
    background-color: #C0A1E8;
}

.visitor {
    background-color: #f3f0e8;
}

.restrict {
    background-color: #F3F095;
}

.public {
    background-color: #E9CA69;
}

.disabledparking {
    background-color: #749CC3;
}

@media only screen and (max-height: 741px) {
    #map-layers {
        position: absolute;
    }
}

@media only screen and (max-width: 741px) {
    #map-layers {
        display: none;
        position: absolute;
    }

    #divOptions {
        display: block;
    }

    #map-canvas {
        width: 90%;
        margin: 0 auto;
    }
}
/* End Google Map */

/* 14. General Procedure Manual */
    .gp-box  
    {
        background-color: #fafafa; 
        border:1px solid #ccc; 
        border-radius: 3px; 
        padding: 8px 10px;font-size:.95em;
    }
    .pagination-large ul > li > a, .pagination-large ul > li > span 
    {
        padding: 5px 8px;
        font-size: 14px;
    }
    #lblGPSearchSearchResultCount 
    {
        font-size:.95em;
        color:#999;
    }
/* End General Procedure Manaul */

/* 15. Scroll To Top */
#btnScrollTop {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 20px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #666; /* Set a background color */
    color: #fff; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px 20px; /* Some padding */
    border-radius: 5px; /* Rounded corners */
    opacity:  .9;
    transition: 200ms linear;
}

#btnScrollTop:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}
/* End Scroll To Top */

/* 16. Login page login links */
.loglinks {
        background: url('/_resources/images/myloginicons.png');
	margin-right: 1.5%;
	margin-left: 1.5%; 
	float: left;
    }
#ll_bobcat {
        background-position: -0px -0px;
        width: 74px;
        height: 80px;
        display: inline-block;
    }
#ll_email {
        background-position: -0px -90px;
        width: 74px;
        height: 80px;
        display: inline-block;
    }
#ll_blackbd {
        background-position: -0px -180px;
        width: 72px;
        height: 80px;
        display: inline-block;
    }
#ll_camp_serv {
        background-position: -0px -270px;
        width: 76px;
        height: 80px;
        display: inline-block;
    }
#ll_its_help {
        background-position: -0px -360px;
        width: 74px;
        height: 80px;
        display: inline-block;
    }
#ll_banner_help {
        background-position: -0px -450px;
        width: 74px;
        height: 80px;
        display: inline-block;
    }
#ll_rdp {
        background-position: -0px -540px;
        width: 74px;
        height: 80px;
        display: inline-block;
    }
#ll_pwd_reset {
        background-position: -0px -630px;
        width: 74px;
        height: 80px;
        display: inline-block;
    }
#ll_web_edit {
        background-position: -0px -720px;
        width: 74px;
        height: 80px;
        display: inline-block;
    }
#ll_cont_ed {
        background-position: -0px -810px;
        width: 74px;
        height: 80px;
        display: inline-block;
    }
#ll_login_help {
        background-position: -0px -900px;
        width: 74px;
        height: 80px;
        display: inline-block;
    }
#ll_login_pay {
        background-position: -0px -991px;
        width: 74px;
        height: 80px;
        display: inline-block;
    }
#ll_courseleaf {
        background-position: -0px -1079px;
        width: 74px;
        height: 80px;
        display: inline-block;
    }
#ll_coccalert {
        background-position: -0px -1170px;
        width: 74px;
        height: 80px;
        display: inline-block;
    }

/* End Login page login links */

/* 17. Forms */
span.help-block
{
	display: block;
	margin-top: -10px;
	margin-bottom: 20px;
	font-size: 0.8rem;
	font-style: italic;
}
/* End Forms */

/* 18. Home Page Slider */
#heroImage .orbit button {
	text-shadow: 0 0 1px #666;
}
/* End Home Page Slider */

/* 19. Academic Pages */
/* Rule to make bottom callouts on new academic pages equal heights */
#main-content > div > div.row.medium-unstack > div.medium-4.columns > div.callout {
    height: 100%;
}

/* Makes subnav buttons were a uniform height */
@media screen and (min-width: 40em) {
    #main-content > div > div.row > div.column > strong > a.button.expanded {
        display: flex;
        height: 80%;
        justify-content: center;
        align-items: center;
    }
}

/* End Academic Pages */


/* 20. Component Specific */
/* Omni CMS poor man's if/else logic. This will hide elements with empty data-ouc-test attributes. https://support.moderncampus.com/cms/technical-reference/components.html */
[data-ouc-test=''] { display: none; }

/* End Component Specific */