/*  ------------------------------------------
    -------------- MAIN STYLES ---------------
     body text, links, headers, lists, tables
    ------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5em;
    margin-bottom: 1em;
}

a:hover, a:focus {
    text-decoration: inherit;
}

#skip-to-content {
    position: absolute;
    left: 0;
    top: 0;
}

    #skip-to-content > a,
    #skip-to-content > a:hover {
        color: transparent;
    }

        #skip-to-content > a:focus,
        #skip-to-content > a:active {
            color: #005587;
        }

.float-none {
    float: none;
}

.field-validation-error {
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545;
}

.input-validation-error {
    background-color: #F2DEDE;
}

.page-item.active .page-link {
    background-color: #0076A8;
    border-color: #0076A8;
}

.page-link {
    color: #0076A8;
}

.small-loading {
    height: 3em;
}

@page {
    size: auto;
}

/*  ------------------------------------------
    LIST STYLES
    ------------------------------------------ */

ul.checkmark, ul.stand-out, ul.subtle-blue, ul.subtle-yellow {
    list-style-type: none;
    padding-left: 0;
}

    ul.checkmark li, ul.stand-out li, ul.subtle-blue li, ul.subtle-yellow li {
        position: relative;
        padding-left: 32px;
        margin-bottom: 10px
    }

    ul.subtle-blue li, ul.subtle-yellow li {
        margin-left: 1em;
        padding-left: 1em;
    }

        ul.checkmark li::before, ul.stand-out li::before, ul.subtle-blue li::before, ul.subtle-yellow li::before {
            font-family: 'Lambton-Icons-Solid';
            position: absolute;
            left: 0;
        }

    ul.stand-out > li::before {
        content: "v";
        color: var(--bs-primary);
        font-size: 3em;
        top: 0.22em;
        transform: translateY(-50%);
    }

    ul.checkmark > li::before {
        content: "'";
        color: var(--bs-success);
        font-size: 3em;
        top: 0.22em;
        transform: translateY(-50%);
    }

    ul.subtle-blue > li::before {
        content: "•";
        color: var(--bs-info);
    }

    ul.subtle-yellow > li::before {
        content: "•";
        color: var(--bs-warning);
    }

dl.stand-out {
    padding-left: 0.5em;
}

    dl.stand-out > dt {
        position: relative;
        padding-left: 32px;
        margin-bottom: 0;
    }

        dl.stand-out > dt::before {
            content: "v";
            color: var(--bs-primary);
            font-family: "Lambton-Icons-Solid";
            font-size: 3em;
            position: absolute;
            left: 0;
            top: 0.22em;
            transform: translateY(-50%);
        }

    dl.stand-out > dd {
        position: relative;
        padding-left: 1em;
        margin-left: 1.8em;
        margin-bottom: 10px;
    }

        dl.stand-out > dd::before {
            content: "•";
            color: var(--bs-info);
            position: absolute;
            left: 0;
        }

ol.stand-out,
ul.it-outages {
    list-style: none;
    padding-left: 0.5em;
    counter-reset: stand-out-item;
}

ol.subtle {
    list-style: none;
    padding-left: 0.5em;
    counter-reset: subtle-item;
}

ol.stand-out > li {
    counter-increment: stand-out-item;
    position: relative;
    padding-left: 3em;
    line-height: 1.5;
    margin-bottom: 2em;
}

    ol.stand-out > li::before {
        content: counter(stand-out-item);
        position: absolute;
        left: 0;
        top: 0;
        font-family: var(--bs-font-sans-serif);
        font-weight: 600;
        color: #FFF;
        background-color: var(--bs-success);
        padding: 4px 10px;
        border-top-left-radius: 8px;
        line-height: 1.5;
    }

ol.subtle > li {
    counter-increment: subtle-item;
    position: relative;
    padding-left: 2em;
    line-height: 1.5;
    margin-bottom: 10px;
}

    ol.subtle > li::before {
        content: counter(subtle-item);
        position: absolute;
        left: 0;
        top: 0;
        color: var(--bs-gray-600);
        font-family: var(--bs-font-sans-serif);
        font-weight: 500;
        line-height: 1.5;
    }

ul.block-reg-legend {
    list-style: none;
}

    ul.block-reg-legend span {
        border: 2px solid;
        width: 30px;
        height: 30px;
        margin: 6px;
    }

    ul.block-reg-legend .incomplete-course-work {
        border: 2px solid #005587;
    }

    ul.block-reg-legend .complete-course-work {
        border: 2px solid silver;
        background-color: #efefef;
        background-image: linear-gradient(45deg, #ffffff 25%, #efefef 25%, #efefef 50%, #ffffff 50%, #ffffff 75%, #efefef 75%, #efefef 100%);
        background-size: 5.66px 5.66px;
    }

ul.it-outages > li {
    background: url(/images/default-source/it/internet-access.png) no-repeat left center;
    background-size: 40px;
    background-position: left;
    padding: 12px 0 12px 2.5em;
    list-style: none;
}

    /* these classes allow for the customized icons to show up for IT outages */

    ul.it-outages > li.int {
        background-image: url(/images/default-source/it/internet-access.png);
    }

    ul.it-outages > li.fil {
        background-image: url(/images/default-source/it/file-server.png);
    }

    ul.it-outages > li.ema {
        background-image: url(/images/default-source/it/email-server.png);
    }

    ul.it-outages > li.pri {
        background-image: url(/images/default-source/it/print-server.png);
    }

    ul.it-outages > li.web {
        background-image: url(/images/default-source/it/website.png);
    }

    ul.powerpoint, ul.pdf, ul.word, ul.excel, ul.doc-list {
        padding-left: 0.5em;
    }
ul.powerpoint > li,
ul.pdf > li,
ul.word > li,
ul.excel > li,
ul.doc-list > li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

    ul.pdf > li::before,
    ul.doc-list > li[data-type="pdf"]::before,
    ul.doc-list > li[data-type="docx"]::before {
        content: "V";
        color: var(--bs-secondary);
        font-family: "Lambton-Icons-Outline";
        font-size: 2.5em;
        flex-shrink: 0;
        line-height: 1em;
    }

    ul.doc-list > li[data-type="docx"]::before {
        content: "Z";
    }

.btn a {
    border: none;
}

.btn-flex {
    display: flex;
    flex-direction: column;
    height: 10em;
    width: 10em;
    justify-content: center;
}

    .btn-flex .icon-font-outline,
    .btn-flex .icon-font-solid {
        font-size: 4em;
    }

.btn.disabled, .btn:disabled {
    cursor: not-allowed;
}

.cinco-expandable-list {
    margin-top: 20px;
    margin-bottom: 20px;
}

    .cinco-expandable-list .panel {
        margin-bottom: 0;
        box-shadow: none;
    }

    .cinco-expandable-list .list-heading .cinco-ex {
        color: #00A9E0;
        display: inline-block;
        font-size: 14px;
        margin-right: 10px;
        transform: rotate(0deg);
    }

    .cinco-expandable-list .list-heading.expanded .cinco-ex {
        transform: rotate(45deg);
    }

    .cinco-expandable-list a.list-heading {
        color: #4A4A4A;
        display: flex;
    }

.landing-page-banner {
    width: 100%;
}

/* A timeline list */
.timeline ul {
    padding: 1em 0 0 2em;
    margin: 0;
    list-style: none;
    position: relative;
}

    .timeline ul::before {
        content: " ";
        height: 100%;
        width: 1px;
        background-color: #d9d9d9;
        position: absolute;
        top: 0;
        left: 2.5em;
        z-index: -1;
    }

    .timeline ul ul::before {
        background-color: transparent;
    }

.timeline .bullet {
    width: 1em;
    height: 1em;
    box-sizing: border-box;
    border-radius: 50%;
    background: #fff;
    z-index: 1;
    margin-right: 1em;
}

.timeline li div {
    display: inline-block;
    margin: 1em 0;
    margin-right: 0px;
    vertical-align: top;
}

.timeline .bullet.blue {
    border: 2px solid #0076A8;
}

.timeline .desc {
    width: 70%;
}

.timeline h3 {
    font-size: 1.2rem;
    font-weight: 400;
    margin: 0;
}

.timeline ul {
    list-style: none;
}

.timeline h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 400;
    color: #6c757d;
    line-height: 1em !important;
}

.timeline .time {
    width: 20%;
    font-size: 1.1rem;
    line-height: 1em !important;
}

/* ------------END LIST STYLES-------------- */
/*  ------------------------------------------
    FORM STYLES
    ------------------------------------------ */

.alert {
    border: 0px;
    border-top-right-radius: 12px;
    font-family: var(--bs-font-sans-serif);
    padding: 1.5em;
}

.outages {
    border: 2px solid #FFD100;
    color: #0076A8;
    font-size: 18px;
    margin-top: 20px;
}

.cinco-form {
    font-family: var(--bs-font-sans-serif);
}

    .cinco-form .single-file-upload {
        padding-bottom: 10px;
    }

    .cinco-form ul.radio > li > label {
        padding: 0;
    }

span.required {
    color: #00ab84;
    font-family: var(--bs-font-sans-serif);
}

label.required:before,
legend.required:before {
    content: "* ";
    font-weight: bold;
    color: #00AB84;
}

/* undo Bootstrap Flexbox on Fieldsets (bug in flexbox) */
fieldset.form-group.row {
    display: block;
}
    /* could also apply to all fieldsets */
    fieldset.form-group.row legend {
        display: block;
        float: left;
        font-size: inherit;
    }

    fieldset.form-group.row > div {
        display: block;
        float: left;
        padding-top: calc(.375rem + 1px);
    }

/* ------------END FORM STYLES-------------- */

/* -------------------------------------------
	CUSTOM BUTTON STYLES
	------------------------------------------*/

.btn-grey {
    background-color: rgba(203,203,203,0.36);
    color: #4a4a4a;
    font-weight: 500;
}

.btn-john {
    border-radius: 3px;
    border: 1px solid #999;
    color: black;
    font: 60px sans-serif;
    background: #F0F0F0;
    background: -moz-linear-gradient(top, #F0F0F0 50%, #D4D4D4 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#F0F0F0), color-stop(50%,#D4D4D4));
    box-shadow: 2px 2px #bebebe;
    margin: 1em 0;
    padding: 20px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0F0F0', endColorstr='#D4D4D4',GradientType=0 );
    width: 100%;
}

/*  ------------------------------------------
    TABLE STYLES
    ------------------------------------------ */

.cinco-table > thead > tr > th {
    border-bottom: 1px solid #00A9E0;
    color: #0076A8;
}

.cinco-table > tbody
.table.table-simple th, .table.table-simple td {
    vertical-align: middle;
    font-weight: normal;
}


/* COMPUTER LAB SCHEDULES - Monitors outside of classrooms */

.lab-schedule {
    table-layout: fixed;
}

    .lab-schedule > thead > tr > th {
        background-color: #00A9E0;
        border-bottom: none;
        color: #FFF;
        font-size: 14px;
        text-align: center;
    }

.openlab-schedule {
    opacity: 0.25;
}

#divBlankScreenBack {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: black;
    z-index: 9000;
}

.openlab {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 1.0;
    text-align: center;
    vertical-align: middle;
    font-size: 60pt;
    padding-top: 3em;
}

.openlab-message {
    font-size: 4rem;
    margin: 0 !important;
}

.lab-schedule > thead > tr > th:nth-child(2n+1) {
    background-color: #0076A8;
}

.lab-schedule > thead > tr > th:first-child {
    background-color: #005587;
    font-family: var(--bs-font-sans-serif);
    vertical-align: middle;
    text-align: center;
    width: 90px;
}

.lab-schedule > thead > tr > th {
    padding: 0.25rem;
}

.lab-schedule .schedule-course {
    background-color: #EEEEEE;
    border: 1px solid #CBCBCB;
    color: #005587;
    font-size: 12px;
    padding: 0.4rem;
}

.lab-schedule > tbody > tr > td {
    font-size: 12px;
    padding: 0.30rem;
}

.lab-schedule-outage {
    list-style: none;
    padding: 0;
}

    .lab-schedule-outage > li {
        padding-bottom: 1em;
    }

#divClock {
    font-size: 44px;
}

#divSchedule {
    padding-left: 0 !important;
}

#divLeftColumn {
    padding: 0 !important;
}

    #divLeftColumn h3 {
        font-size: 15px !important;
    }

    #divLeftColumn .widget-content, #divAlertsData {
        font-size: 14px !important;
    }

.neg-margin {
    margin: 0 -0.2em;
}

/* STUDENT ACCOUNT SUMMARY TABLE */

.account-summary tbody th {
    width: 35%;
}

.account-summary .balance-owing {
    background-color: #EFEFEF;
    border-top: 2px solid #DCDCDC;
    font-weight: 700;
}

.account-summary .subtotal {
    border-top: 3px solid #6f6f6f;
}

/* myHOMEPAGE SCHEDULE */

.schedule-table,
.hris-personal-calendar {
    width: 100%;
    font-family: var(--bs-font-sans-serif);
    table-layout: fixed;
}

    .schedule-table thead,
    .hris-personal-calendar thead {
        color: white;
        font-weight: 500;
        text-align: center;
        text-transform: uppercase;
    }

        .schedule-table thead tr th:first-child {
            width: 4.5em;
        }

        .schedule-table thead th:not(:first-of-type) {
            background-color: #0076a8;
            padding: 6px 3px;
            border: 3px solid white;
        }

        .schedule-table thead tr td {
            padding: 0;
        }

    .schedule-table td {
        width: 70px;
    }

        .schedule-table td + td {
            width: auto;
        }

    .schedule-table tbody tr td:first-child {
        text-align: center;
    }

    .schedule-table tr td,
    .schedule-table tbody th {
        border-bottom: #979797;
        border-bottom: 1px solid rgba(151, 151, 151, 0.2);
    }

    .schedule-table tbody th {
        font-weight: normal;
        padding: 0.5em 0;
    }

    .schedule-table tr td.course {
        border: 2px solid #0076A8;
        vertical-align: top;
        padding: 0.5em;
    }

        .schedule-table tr td.course.conflict {
            border-color: #00A9E0;
            border-style: dashed;
        }

    .schedule-table .section-frequency,
    .schedule-table .frequency {
        font-size: 0.8em;
        float: right;
    }

    .schedule-table .section-title {
        font-weight: 500;
    }

    .schedule-table ul.section-faculty {
        font-size: 0.9em;
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
    }

    .schedule-table .section-conflicts {
        font-size: 0.9em;
    }

        .schedule-table .section-conflicts ul {
            padding-left: 1em;
        }

/* BLOCK REGISTRATION SCHEDULE */

.block-registration-schedule .schedule-table tr td.course {
    border: 2px solid #005587;
}

    .block-registration-schedule .schedule-table tr td.course.complete {
        border: 2px solid #6f6f6f;
        background-color: #efefef;
        background-image: linear-gradient(45deg, #ffffff 25%, #efefef 25%, #efefef 50%, #ffffff 50%, #ffffff 75%, #efefef 75%, #efefef 100%);
        background-size: 5.66px 5.66px;
    }

/* ------------END TABLE STYLES-------------- */

.bg-green h2,
.bg-dark-gray h2 {
    color: #FFF;
}

.vertical-align {
    display: flex;
    align-items: center;
}

.psst {
    border: 2px solid #CBCBCB;
    border-top-right-radius: 14px;
    font-family: var(--bs-font-sans-serif);
    margin: 12px 0;
    padding: 18px;
}

.dot {
    background: #ddd;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #FFF;
    font-size: 2em;
}

.lg-spacer {
    margin-top: 2em;
    margin-bottom: 2em;
}

/*  ------------------------------------------
    WIDGET STYLING
    ------------------------------------------ */

/*  ------------------------------------------
     custom mvc widget icons 
    ------------------------------------------ */

/* video gallery overrides */
.sf-Gallery-thumbs--video a > img {
    height: 160px;
    width: 262px;
}

.sf-Gallery-thumbs.sf-Gallery-thumbs--video > .sf-Gallery-thumb,
.sf-Gallery-thumbs.sf-Gallery-thumbs--video a {
    width: auto;
    height: auto;
    border: 0 none;
}

/* image gallery overrides */
.mfp-zoom-out-cur {
    cursor: default !important;
}

    .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
        cursor: pointer !important;
    }

.widget-basicbtn {
    background: url("/img/widget-icons/basic-button.png") no-repeat 0px 0px / 52px !important;
}

.widget-clicktochat {
    background: url("/img/widget-icons/click-to-chat.png") no-repeat 0px 0px / 52px !important;
}

.widget-itoutages {
    background: url("/img/widget-icons/it-outages.png") no-repeat 0px 0px / 52px !important;
}

.widget-landingbanner {
    background: url("/img/widget-icons/landing-banner.png") no-repeat 0px 0px / 52px !important;
}

.side-button {
    background-color: var(--bs-info);
    border-top-left-radius: 20px;
    color: #FFF;
    font-family: var(--bs-font-sans-serif);
    margin: 20px 0;
}

    .side-button:hover {
        background-color: var(--bs-primary);
        transition: all 1s ease;
    }

    .side-button h3 {
        color: #FFF;
        font-size: 26px;
        margin: 0;
        padding: 20px;
    }

    .side-button img {
        width: 100%;
        border-top-left-radius: 466px 103px;
    }

    .side-button .link-text::before {
        left: 0;
        background-color: var(--bs-primary);
        border-top-left-radius: 360px 40px;
        border-top-right-radius: 380px 60px;
        content: " ";
        top: -37%;
        display: inline-block;
        width: 100%;
        height: 40%;
        position: absolute;
    }

    .side-button .link-text {
        background-color: var(--bs-primary);
        padding: 18px 20px 10px;
        position: relative;
    }

        .side-button .link-text span {
            font-size:4em;
            top: -48%;
            position: absolute;
        }

.sf-FileField .icon-remove {
    background-image: url('/img/icons/Solid/Dark-Blue/ui_close_solid_d-60.png');
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
    background-position-y: bottom;
}

.sf-FileField .icon-add {
    background-image: url('/img/icons/Solid/Medium-Blue/ui_plus_solid_m-60.png');
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
    background-position-y: bottom;
}

/* If the button is the first item on a right hand column, apply spacing from the banner */
.col-md-3 > a.btn-basic:first-child,
.col-md-3 > .small-widget:first-child > h3,
.col-md-3 > .secondary-search:first-of-type {
    margin-top: 47px;
}

.btn-basic {
    font-size: 1.1em;
    margin-bottom: 0.5em;
    text-align: left;
}

a.btn-basic:not(:first-child) {
    margin-top: 12px;
}

.col-md-3 .btn-basic {
    font-size: 1em;
    padding: 0.5em;
    border-top-right-radius: 0;
}

    .click-to-chat h3 {
        background: #0076A8 no-repeat 16px;
        font-size: 18px;
        color: #fff;
    }

/*  ------------------------------------------
     contact 
    ------------------------------------------ */

.contact {
    font-family: var(--bs-font-sans-serif);
    word-wrap: break-word;
    padding: 2em 1em 1em 1em;
}


/* ------------end contact-------------- */

.small-widget > h3 {
    background-color: #005587;
    display: block;
    color: #FFF;
    font-family: var(--bs-font-sans-serif);
    font-weight: 500;
    border-bottom: 5px solid #00A9E0;
    padding: 10px 20px;
    border-top-left-radius: 20px;
    margin-bottom: 0;
    margin-top: 12px;
}

.small-widget > div {
    background-color: #F8F8F8;
    padding: 20px;
    margin-top: 0;
}

.border-inside {
    border-left: 1px solid var(--bs-primary-border-subtle);
    border-top: 1px solid var(--bs-primary-border-subtle);
}

    .border-inside:nth-child(odd) {
        border-left: none;
    }

    .border-inside:first-child {
        border-left: none;
        border-top: none;
    }

    .border-inside:nth-child(2) {
        border-top: none;
    }

/*  ------------------------------------------
     sequence/feature widget styles 
    ------------------------------------------ */

#sequence {
    background-color: #005587;
    font-family: var(--bs-font-sans-serif);
    position: relative;
    height: 300px;
    width: 100%;
    overflow: hidden;
}

    /* Make the canvas the same dimensions as the container and prevent lines from
   wrapping so each step can sit side-by-side */
    #sequence .seq-canvas {
        height: 92%;
        padding: 0;
        width: 100%;
        white-space: nowrap;
    }

        /* Make the steps the same size as the container and sit side-by-side */
        #sequence .seq-canvas > * {
            border: 0;
            display: inline-flex;
            font-size: 14px;
            flex-direction: column;
            height: 100%;
            padding: 50px 30px;
            white-space: normal;
            width: 100%;
            vertical-align: top;
        }

.seq-prev,
.seq-next {
    background-color: var(--bs-primary);
    float: left;
    opacity: 0.9;
    width: 50%;
    z-index: 200;
}

.seq-next {
    background-color: var(--bs-secondary);
}

.feature-block {
    background-color: var(--bs-primary);
    color: #FFF;
}

    .feature-block:nth-of-type(2n+1) {
        background-color: var(--bs-secondary);
    }

    .feature-block:hover {
        background-color: var(--bs-info);
        transition: all 1s ease;
    }

/* ------------end sequence/feature widget styles-------------- */

/*  ------------------------------------------
     embedded video styles
    ------------------------------------------ */

.video-embed {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

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

/* ------------end embedded video styles-------------- */

a.btn-my-homepage {
    background-color: #FFF;
    border: 1px solid #DCDCDC;
    border-radius: 0;
    color: #4A4A4A;
    padding: 22px;
    width: 100%;
    height: 70px; /* Set a fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    a.btn-my-homepage:hover {
        color: #0076A8;
        border-color: #0076a857;
    }

/*  ------------------------------------------
    ---------- FANCY PAGE STYLES -------------
    -- usually referenced with an ID
    -- poster pages
    ------------------------------------------ */

#side-area .btn-my-homepage {
    color: #005587;
    font-family: var(--bs-font-sans-serif);
    align-items: center;
    justify-content: flex-start;
}

    #side-area .btn-my-homepage:hover {
        background-color: var(--bs-primary);
        color: #fff;
    }

a.btn-highlight {
    background-color: #0076A8;
    background-image: url('../img/supportstaff-button-d.jpg');
    border: 1px solid #f5f5f5;
    color: #FFF;
    display: flex;
    flex-direction: column;
    padding: 2em;
    font-family: var(--bs-font-sans-serif);
}

    a.btn-highlight span {
        font-size: 3em;
    }

.btn-highlight-row > div a.btn-highlight:hover {
    background-color: #00A9E0;
    background-image: url('../img/supportstaff-button-l.jpg');
    background-size: 300px;
}

.btn-highlight-row > div:nth-child(3n+1) .btn-highlight {
    background-color: #005587;
    background-image: url('../img/supportstaff-button-m.jpg');
}

.btn-highlight img {
    display: block;
    height: 30px;
    margin-bottom: 10px;
    width: 30px;
}

.landing-page-banner p,
.landing-page-title .h1,
.landing-page-title h1 {
    color: #FFF;
    margin-bottom: 1rem;
    font-family: var(--bs-font-sans-serif);
}

.btn-international {
    align-items: flex-start;
    background-color: #0076A8;
    background-image: url('../img/supportstaff-button-d.jpg');
    border-radius: 0px;
    border-style: none;
    color: #FFF;
    display: inline-block;
    height: 8em;
    line-height: 1em;
    width: 100%;
}

.btn-international-alt {
    background-color: #0076A8;
    background-image: url('../img/supportstaff-button-m.jpg');
}

.btn-international img {
    display: block;
    height: 2em;
    margin-top: 2em;
    margin-bottom: 1.0em;
    width: 2em;
}

.btn-international:hover {
    background-color: #00A9E0;
    background-image: url('../img/supportstaff-button-l.jpg');
    color: #FFF;
}

/*  ------------------------------------------
    HRIS
    ------------------------------------------ */

.hris-summary {
    font-family: var(--bs-font-sans-serif);
}

    .hris-summary .badge-primary {
        background-color: #0076A8;
        font-size: 14px;
    }

        .hris-summary .badge-primary a {
            color: #FFF;
        }

            .hris-summary .badge-primary a:hover {
                color: #94bccd;
            }


/*  ------------------------------------------
     accordion
    ------------------------------------------ */

#exam-schedule table,
#exam-schedule thead,
#exam-schedule tbody,
#exam-schedule th,
#exam-schedule td,
#exam-schedule tr {
    display: block;
}

    /* Hide table headers (but not display: none;, for accessibility) */
    #exam-schedule thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #exam-schedule td:first-child {
        /* Behave  like a "row" */
        background-color: #005587;
        color: #FFF;
        padding-left: 1em;
    }

#exam-schedule td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 40%;
}

    #exam-schedule td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        left: 1em;
        white-space: nowrap;
    }

    #exam-schedule td:nth-of-type(2):before {
        content: "Instructor";
    }

    #exam-schedule td:nth-of-type(3):before {
        content: "Date";
    }

    #exam-schedule td:nth-of-type(4):before {
        content: "Time";
    }

    #exam-schedule td:nth-of-type(5):before {
        content: "Location";
    }

#scholarships-bursaries-table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

    #scholarships-bursaries-table td,
    #scholarships-bursaries-table th {
        padding: 1em
    }

#scholarships-bursaries-table_length {
    float: right;
}

#scholarships-bursaries-table_filter {
    float: left;
}

#scholarships-bursaries-table thead tr {
    font-size: 1.1em;
    color: #0076A8;
}

#scholarships-bursaries-table tbody tr {
    background-color: #F2FBFE;
    border-radius: 10px;
    overflow: hidden;
}

#scholarships-bursaries-table tr td:first-child {
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
}

#scholarships-bursaries-table tr td:last-child {
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
}

.course-name {
    width: 15%;
    display: inline-block;
}

.course-title {
    width: 60%;
    display: inline-block;
}

/*  ------------------------------------------
     accordion nested inside another 
    -- used for program maps 
    ------------------------------------------ */

cinco-inner-accordion .accordion-item.collapsed > .accordion-header > span.has-requisites,
span.has-requisites {
    width: 1.5em;
    height: 1.5em;
    border: 1.5px solid #4A4A4A;
    border-radius: 50%;
    font-family: var(--bs-font-sans-serif);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
}

/*  ------------------------------------------
     side navbar styling     
    ------------------------------------------ */

.cinco-nav h3 {
    margin-top: 2em;
    white-space: normal;
}

.cinco-nav ul {
    font: 16px "Barlow", Tahoma;
}

    .cinco-nav ul li a {
        display: block;
        color: #4A4A4A;
        padding: 1em;
    }

        .cinco-nav ul li a:hover {
            background-color: #E5F1F6;
        }

    .cinco-nav ul li:last-child a {
        border-bottom: 0;
    }

    .cinco-nav ul li.active > a {
        background-color: #0076A8;
        color: #FFF;
    }

        .cinco-nav ul li.active > a:hover {
            background-color: #00A9E0;
        }

    .cinco-nav ul li.active ul.group {
        background-color: #FBFBFB;
    }

    .cinco-nav ul.group {
        font-size: 14px;
    }

        .cinco-nav ul.group a {
            background-color: #fbfbfb;
            padding: 0.5em 1em;
        }

        .cinco-nav ul.group li.active a {
            background-color: #d9ecec;
            color: #4A4A4A;
        }

.cinco-nav .navbar-toggler .pancake.top-bar,
.cinco-nav .navbar-toggler .pancake.middle-bar,
.cinco-nav .navbar-toggler .pancake.bottom-bar {
    background-color: #4A4A4A;
}

.cinco-nav .navbar-toggler {
    border: 0;
    padding-bottom: 0em;
    margin-top: 0.5em;
}

main a {
    border-bottom: 1px solid #bfd2d7;
}
/*  ------------------------------------------
     top navbar styling     
    ------------------------------------------ */

#navbar-outer {
    padding: 0em;
}

#top-links {
    background-color: #F2F2F2;
    height: 4em;
    font-family: "Barlow", Tahoma, sans-serif;
    margin-left: auto;
    padding-left: 0.5em;
    width: 100%;
}

    #top-links a {
        color: #4A4A4A;
        padding: 1em;
    }

        #top-links a.nav-item {
            display: none;
        }

    #top-links .icon-font-search {
        font-size: 18px;
    }

    #top-links .dropdown-menu {
        padding: 0em;
    }

    #top-links a:hover, #top-links button:hover {
        color: #005587;
    }

#howdy-dropdown {
    cursor: pointer;
    min-width: 160px;
}

.show #howdy-dropdown,
.show #howdy-dropdown:hover {
    background-color: #4A4A4A;
    color: #FFF;
}

#top-links .dropdown-menu a.dropdown-item,
#top-links .dropdown-menu button.dropdown-item {
    background-color: #FFF;
    border-top: 1px solid #DCDCDC;
    cursor: pointer;
    font-size: 13px;
    padding: 1em;
}

    #top-links .dropdown-menu a.dropdown-item:hover,
    #top-links .dropdown-menu button.dropdown-item:hover {
        background-color: #FAFAFA;
    }

input.search-field::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #FFFFFF;
    font-family: var(--bs-font-sans-serif);
    letter-spacing: 1.1px;
}

input.search-field, input.search-field:focus, input.search-field:focus {
    background: none;
    border: 0;
    font-family: var(--bs-font-sans-serif);
    width: 130px;
}

#navbar-inner a.navbar-brand img,
#main-login-logo {
    width: 200px;
}

#navbar-inner {
    padding-left: 0em;
    padding-right: 0em;
}

    #navbar-inner .navbar-brand {
        margin-left: 1rem;
    }

button.navbar-toggle:focus {
    outline: none;
}

.navbar-toggler .pancake.top-bar,
.navbar-toggler .pancake.middle-bar,
.navbar-toggler .pancake.bottom-bar {
    border-radius: 10px;
    width: 20px;
    height: 4px;
    background-color: #00A9E0;
    margin: 4px;
    display: block;
    transition: .4s;
}

.navbar-toggler .pancake.top-bar {
    transform: rotate(45deg);
    transform-origin: -10% 3px;
}

.navbar-toggler .pancake.middle-bar {
    opacity: 0;
}

.navbar-toggler .pancake.bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 0%;
}

.navbar-toggler.collapsed .pancake.top-bar {
    transform: rotate(0);
}

.navbar-toggler.collapsed .pancake.middle-bar {
    opacity: 1;
}

.navbar-toggler.collapsed .pancake.bottom-bar {
    transform: rotate(0);
}

div.landing-page-banner, div.secondary-page-banner {
    background: url("/img/abstract-shield-background.jpg") #005587;
    background-size: cover;
    height: 120px;
}

div.secondary-page-banner {
    height: 80px;
}

img.landing-page-banner {
    width: 100%;
    object-fit: cover;
}

img.secondary-page-banner {
    width: 100%;
    object-fit: cover;
    height: 4em;
}

#main-nav {
    background-color: #005587;
    border-top: 1px solid rgb(0, 85, 135);
    font-family: "Barlow", Tahoma, sans-serif;
    font-weight: 500;
}

    #main-nav .nav-link {
        color: #FFF;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #main-nav .nav-item.dropdown.show .nav-link {
        background-color: #00A9E0;
    }

    #main-nav ul > li.nav-item {
        border-bottom: 2px solid #023858;
    }

    #main-nav .dropdown-toggle:after {
        content: none;
    }

    #main-nav .nav-item .cinco-ex {
        float: right;
        margin-right: 0.6em;
    }

    #main-nav .nav-item.show .cinco-ex {
        transform: rotate(45deg);
    }

    #main-nav ul .dropdown-menu {
        background-color: #0076A8;
        position: relative;
        right: 0;
        min-width: 100%;
        border-radius: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    #main-nav ul .dropdown-item {
        color: #FFF;
        padding-left: 1rem;
    }

        #main-nav ul .dropdown-item:hover {
            background-color: rgb(0, 85, 135);
        }

        #main-nav ul .dropdown-item:last-child {
            border-bottom: none;
        }

/*  ------------------------------------------
    my homepage 
    ------------------------------------------ */

#timetable-nav {
    font-family: var(--bs-font-sans-serif);
}

    #timetable-nav .grid-view {
        border-bottom: 0em;
    }

        #timetable-nav .grid-view img {
            width: 20px;
        }

    #timetable-nav select {
        color: #005587;
        font-size: 16px;
        width: auto;
    }

#timetable {
    font-family: var(--bs-font-sans-serif);
    min-height: 400px;
    width: 100%;
    clear: both;
    display: none;
}

.timetable-divider {
    border-bottom: 1px solid #DCDCDC;
}

#timetable-list, .schedule-list {
    color: #4A4A4A;
    font-size: 16px;
    font-family: var(--bs-font-sans-serif);
}

    #timetable-list span.day,
    .schedule-list span.day {
        color: #FFF;
        text-align: center;
        text-transform: uppercase;
        min-width: 70px;
    }

    #timetable-list .flex-fill,
    .schedule-list .flex-fill {
        background-color: #F2F2F2;
    }

        #timetable-list .flex-fill ul:not(:last-child)
        .schedule-list .flex-fill ul:not(:last-child) {
            border-bottom: 1px solid #DCDCDC;
        }

    #timetable-list .col-lg-4,
    .schedule-list .col-lg-4 {
        text-align: left;
    }

    #timetable-list > ul > li,
    .schedule-list > ul > li {
        background-color: #00AB84;
        border-top-left-radius: 8px;
    }

        #timetable-list > ul > li:nth-child(2n+1),
        .schedule-list > ul > li:nth-child(2n+1) {
            background-color: #00c195;
        }

.block-registration-schedule .schedule-list > ul > li {
    background-color: #005587;
}

.block-registration-schedule .schedule-list div.complete {
    background-color: #6f6f6f;
    background-image: linear-gradient(45deg, #ffffff 25%, #efefef 25%, #efefef 50%, #ffffff 50%, #ffffff 75%, #efefef 75%, #efefef 100%);
    background-size: 5.66px 5.66px;
    color: #8d8d8d;
}

#timetable-list > ul > li > ul,
.schedule-list > ul > li > ul {
    background-color: #F2F2F2;
    text-align: left;
}

#timetable-list > ul > li:nth-child(2n+1) > ul,
.schedule-list > ul > li:nth-child(2n+1) > ul {
    background-color: #F8F8F8;
}

#timetable-list > ul > li > ul:not(:last-child) > li.text-right:last-child,
.schedule-list > ul > li > ul:not(:last-child) > li.text-right:last-child {
    border-bottom: 1px solid #DCDCDC;
    padding-bottom: 12px;
}

#timetable-list .conflict,
.schedule-list .conflict {
    border: 2px solid #00A9E0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    color: #00A9E0;
    height: 30px;
    font: 500 16px var(--bs-font-sans-serif);
    line-height: 30px;
    text-align: center;
    width: 30px;
}

#timetable-alert {
    background-color: #FFD100;
    font: 16px var(--bs-font-sans-serif), Tahoma, sans-serif;
}

    #timetable-alert .conflict,
    .alert-primary .conflict,
    .alert-yellow .alert-icon, .alert-symbol {
        border: 2px solid #4A4A4A;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        font-family: var(--bs-font-sans-serif), Tahoma, sans-serif;
        font-weight: 500;
        text-align: center;
        display: inline-block;
        width: 28px;
        padding: 2px 10px;
    }

.alert-yellow {
    background-color: #FFD100;
}

#homepage-alert .symbol {
    border: 3px solid;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    display: block;
    width: 1.5em;
    height: 1.5em;
    min-width: 1.5em;
}

#general-alert {
    border-radius: 0px;
    margin: 10px;
    line-height: 1.2;
}

/*  ------------------------------------------
    -------------- EVENT STYLES ---------------
    widgets, listing & details
    ------------------------------------------ */

/*  ------------------------------------------
    widgets
    ------------------------------------------ */

.event-list-filters h2 {
    color: #4A4A4A;
    font-size: 18px;
    margin-bottom: 0.5em;
}

.event-list-filters ul li a {
    border: 0;
    color: #4A4A4A;
    font: 14px var(--bs-font-sans-serif), Tahoma, sans-serif;
}

.important-dates-deadlines::before,
.health-wellness::before,
.social-events::before,
.professional-development::before,
.information-sessions::before {
    justify-content: flex-end;
}

.event-list-filters ul li::before,
.information-sessions::before,
.health-wellness::before,
.important-dates-deadlines::before,
.social-events::before,
.professional-development::before {
    color: var(--bs-primary);
    display: inline-flex;
    font-family: "Lambton-Icons-Outline";
    vertical-align: -7%;
    width: 1.5em;
    font-size: 1.5em;
}

.event-list-filters ul li.inf::before,
.information-sessions::before {
    content: ")";
}

.event-list-filters ul li.hea::before,
.health-wellness::before {
    content: ":";
}

.event-list-filters ul li.imp::before,
.important-dates-deadlines::before {
    content: "`";
}

.event-list-filters ul li.soc::before,
.social-events::before {
    content: "R";
}

.event-list-filters ul li.pro::before,
.professional-development::before {
    content: "}";
}

/* search results widget */
.search-results h2 /* note: this class must be added in the widget editor in the Css Classes field */ {
    color: #4a4a4a;
    font-size: 14pt;
    font-style: italic;
    padding: 0;
    margin: 0;
}

.sf-search-results.media-list .sf-media-body {
    margin-top: 50px;
    line-height: 1.2;
}

    .sf-search-results.media-list .sf-media-body h3 {
        color: #0076a8;
        margin-bottom: 14px;
    }

        .sf-search-results.media-list .sf-media-body h3 > a {
            color: #0076a8;
        }

    .sf-search-results.media-list .sf-media-body > p {
        margin-bottom: 10px;
        line-height: 1.4;
    }

    .sf-search-results.media-list .sf-media-body > a {
        font-size: 11pt;
        font-style: italic;
        color: #4a4a4a;
        border-bottom-color: #c9c9c9;
    }

    .sf-search-results.media-list .sf-media-body a:hover {
        border-bottom: none;
    }

    .sf-search-results.media-list .sf-media-body a:focus,
    .sf-search-results.media-list .sf-media-body a:active {
        color: #00a9e0;
    }

/* scroller widget */
.event-scroller {
    background-color: #005587;
    color: white;
    position: relative;
    height: 50px;
    border-top-right-radius: 14px;
    margin-top: 47px;
}

    .event-scroller h1 {
        color: #FFF;
        font-size: 22px;
        padding-left: 14px;
        padding-top: 14px;
    }

    .event-scroller a.next:before {
        /* css arrow */
        border-bottom: 8px solid transparent;
        border-left: 8px solid #fff;
        border-top: 8px solid transparent;
        content: '';
        position: absolute;
        right: 25px;
        top: 15px;
    }

    .event-scroller a.prev:before {
        /* css arrow */
        border-bottom: 8px solid transparent;
        border-right: 8px solid #fff;
        border-top: 8px solid transparent;
        content: '';
        position: absolute;
        right: 80px;
        top: 15px;
    }

/*  ------------------------------------------
    event listing 
    ------------------------------------------ */

.event-type-icon {
    font-size: 1.5em;
}

#event-listing .event-list > li {
    font-family: var( --bs-font-sans-serif);
    width: 100%;
    padding-top: 60px;
    padding-bottom: 20px;
}

#event-listing .event-list.right-col-event-list > li {
    padding-top: 0;
    padding-bottom: 0;
}

#event-listing .event-list h2 {
    font-size: 20px;
    color: #4A4A4A;
    margin: 0;
    font-weight: normal;
}

#event-listing .event-list-details p {
    margin-bottom: 0;
}

#event-listing .event-list > li.primary-event:first-of-type {
    margin-top: 0;
}

#event-listing.content-page .event-list > li.primary-event {
    margin-top: 0px;
    padding-top: 2em;
}

#event-listing.content-page .event-list h2 {
    font-size: 18px;
}

#event-listing.content-page .event-list > li.secondary-event .event-list-details > .row {
    padding-top: 2em;
}

#event-listing .event-box {
    border-top-right-radius: 2em;
    background-color: #00a9e01a;
    transition: transform 0.3s ease-in-out;
}

    #event-listing .event-box:hover {
        transform: translateY(-5px);
    }

    #event-listing .event-box time {
        font-weight: 500;
        font-size: 1.2em;
        font-family: var(--bs-font-sans-serif);
    }

    #event-listing .event-box .badge.rounded-pill {
        color: #4A4A4A;
        font-size: 1em;
        font-weight: revert;
        background-color: #ffffff96;
        padding-right: 1.4em;
        margin-right: 0.5em;
    }

#event-listing .event-list.right-col-event-list > li.primary-event:first-of-type {
    margin-top: 40px;
}

#event-listing .event-list > li.secondary-event {
    padding-top: 5px;
}

    #event-listing .event-list > li.secondary-event .event-list-details > .row {
        border-top: 1px solid #e4e4e4;
        padding: 12px 0;
        margin-left: 0;
        padding-top: 34px;
    }

        #event-listing .event-list > li.secondary-event .event-list-details > .row > .col-sm-9 {
            padding-left: 0;
        }

#event-listing-detail svg.icon, #event-listing svg.icon {
    fill: #00A9E0;
    width: 1.3em;
    overflow: visible;
}

#event-listing-detail .btn-light {
    border-radius: 2em;
    outline: #efefef;
    outline-style: solid;
    outline-width: thin;
}

/* very specific media queries for the event listing page, to line up secondary items  */
@media (max-width: 575px) {
    #event-listing .event-list > li.secondary-event .event-list-details > .row > .col-sm-3 {
        padding-left: 0;
    }
}
/* media query to reduce some of the spacing on phone/mobile views */
@media (max-width: 767px) {
    #event-listing .event-list > li.primary-event {
        margin-top: 30px;
    }

    #event-listing .event-list > li {
        padding-top: 30px;
        padding-bottom: 0;
    }

        #event-listing .event-list > li.secondary-event .event-list-details > .row {
            padding-top: 14px;
        }
}

.event-list-details {
    flex: 1;
    padding-left: 15px;
    padding-right: 15px;
}

.secondary-event .event-list-details {
    padding-left: 85px;
}

#event-list .event-list-details time {
    color: #00A9E0;
}

.event-square:after {
    border-bottom: 8px solid transparent;
    border-left: 8px solid #005587;
    border-top: 8px solid transparent;
    content: " ";
    left: 70px;
    bottom: 17px;
    position: absolute;
}

.event-square {
    background-color: #0076A8;
    color: #FFF;
    border-top-left-radius: 8px;
    padding: 0;
    width: 70px;
    position: relative;
}

    .event-square > .month {
        background-color: #0076A8;
        width: 100%;
        padding: 5px 7px;
        display: block;
        border-bottom: 4px solid #00A9E0;
        border-top-left-radius: 8px;
    }

        .event-square > .month.small {
            padding: 7px;
        }

    .event-square > .day {
        background-color: #005587;
        width: 100%;
        display: block;
        padding: 6px;
    }

        .event-square > .day.small {
            padding: 8px 6px;
        }

/* Right-column Event Listing */
.right-col-event-list .event-square {
    width: 56px;
}

    .right-col-event-list .event-square > .day {
        padding: 4px 7px;
    }

    .right-col-event-list .event-square > .month {
        padding: 4px 7px;
    }

    .right-col-event-list .event-square:after {
        left: 56px;
        bottom: 14px;
        border-bottom: 6px solid transparent;
        border-left: 6px solid #005587;
        border-top: 6px solid transparent;
    }

#event-listing .right-col-event-list .event-list-details {
    width: 60%;
}

#event-listing .right-col-event-list h3 {
    color: #005587;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/*  ------------------------------------------
    event details (after you click an event)
    ------------------------------------------ */

.event-icon {
    position: relative;
    width: 22px;
    height: 22px; /* seems to be ignored */
    background-size: 22px;
    padding-left: 22px;
    margin: 0 10px 0 0;
    background-repeat: no-repeat;
    background-position: left center;
}

/*  ------------------------------------------
    upcoming event
    ------------------------------------------ */

#upcoming-events-listing {
    font-family: var(--bs-font-sans-serif);
}

    #upcoming-events-listing > a,
    #upcoming-events-listing .event-list-details {
        color: #4A4A4A;
    }

        #upcoming-events-listing .event-list-details p:first-child {
            font-weight: 500;
            margin: 0 0 0.2em;
            line-height: 1.3em;
        }

    #upcoming-events-listing .upcoming-event .event-square {
        background-color: #005587;
        width: 65px;
        height: 65px;
    }

    #upcoming-events-listing .upcoming-event:nth-child(2n+1) .event-square {
        background-color: #0076A8;
    }

        #upcoming-events-listing .upcoming-event:nth-child(2n+1) .event-square:after {
            border-left: 8px solid #0076A8;
        }

    #upcoming-events-listing .upcoming-event .event-square:after {
        bottom: 26px;
        left: 65px;
    }

    /* hover */
    #upcoming-events-listing .upcoming-event a:hover .event-square {
        background-color: #00a9e0;
    }

        #upcoming-events-listing .upcoming-event a:hover .event-square:after {
            border-left: 8px solid #00a9e0;
        }

    #upcoming-events-listing .upcoming-event a:hover .event-list-details {
        color: #777;
    }

    #upcoming-events-listing .upcoming-event .event-square > span {
        font-weight: 500;
        display: block;
        height: 65px;
        padding: 6px;
    }

        #upcoming-events-listing .upcoming-event .event-square > span > br {
            height: 6px;
            display: block;
            content: '';
        }

        #upcoming-events-listing .upcoming-event .event-square > span.large-event {
            font-size: 16px;
        }

/* ------------error page styles-------------- */

#error-page {
    color: #FFF;
}

    #error-page .col-md-4 {
        background-color: #0076A8;
        padding: 70px 40px;
    }

    #error-page .col-md-8 {
        background-color: #005587;
    }

        #error-page .col-md-8 img {
            height: auto;
            max-width: 100%;
            padding: 0 60px;
        }

    #error-page h1 {
        border-bottom-color: #FFF;
        color: #FFF;
        font-size: 50px;
        margin-top: 100px;
        margin-bottom: 0;
    }

    #error-page h2 {
        border: none;
        color: #FFF;
        font-size: 180px;
        margin-top: 0;
        margin-bottom: 0;
    }

    #error-page h3 {
        color: #00A9E0;
        font-weight: 500;
        font-size: 32px;
        margin-top: 0em;
    }

    #error-page .error-back {
        font-size: 21px;
        font-weight: 500;
        margin-top: 70px;
    }

        #error-page .error-back a {
            color: #FFF;
        }

            #error-page .error-back a:hover {
                color: #00A9E0;
            }

    /* hide on mobile */
    #error-page .col-md-8 {
        display: none;
    }

/* -------------------------------------------- */
/* ------------poster page styles-------------- */
/* -------------------------------------------- */

.poster .landing-page-banner {
    background: url(/img/abstract-shield-background.jpg) #005587;
    background-size: cover;
}

.poster.partnership-student .landing-page-banner {
    height: 120px;
}

.poster .indigenous.poster-image {
    height: 200px;
    position: relative;
    overflow: hidden;
    border-top: 5px solid #FEDF49;
    background: #edf1f3;
}

.poster .bg-secondary .cinco-expandable-list a.list-heading,
.call-out .bg-green .cinco-expandable-list a.list-heading {
    color: #FFF;
}

.poster .breakout-box ol li {
    font-size: 16px;
    margin-bottom: 10px;
}

.poster .vertical-align {
    display: block;
}

.poster .breakout-box {
    padding: 0 0 30px;
}

.poster .poster-image {
    border-top: 5px solid #00A9E0;
}

.poster .center-block .blank-box {
    padding-top: 20px;
    padding-bottom: 32px;
}

.poster .bg-primary,
.poster .bg-primary a,
.poster .bg-secondary,
.poster .bg-secondary a,
.poster .bg-light-blue,
.poster .bg-light-blue a {
    color: #FFF;
}

.poster .cinco-width > .col-12 > .row:not(.poster-image) {
    padding-bottom: 3em;
    padding-top: 3em;
}

.poster .bg-light-blue.new-students img {
    width: 1.8em;
    padding-right: 13px;
}

.poster .marketing .icon-link img {
    width: 36px;
    padding-right: 13px;
}

.poster .marketing a.icon-link {
    border-bottom: 0;
    color: #FFF;
    font-size: 22px;
    margin-bottom: 20px;
}

    .poster .marketing a.icon-link:hover {
        color: #00A9E0;
    }

.call-out .btn {
    border: 2px solid #FFF;
    border-radius: 0px 15px 0px 0px;
    font-size: 16px;
    white-space: normal;
    width: 100%;
}

    .call-out .btn:not(:first-child) {
        margin-top: 12px;
    }

.bg-light-blue a,
.bg-secondary a,
.bg-secondary h2,
.bg-secondary h3,
.bg-secondary dl.stand-out > dt,
.bg-primary h2,
.bg-green h3,
.bg-green a {
    color: #FFF;
}

.bg-secondary ol.subtle > li:before {
    color: #ffd100;
}

.bg-light-blue.btn {
    border: 0;
    border-radius: 0px 15px 0px 0px;
    color: #FFF;
    margin-top: 20px;
    width: 100%;
}

.bg-green.call-out,
.bg-light-blue.call-out,
.bg-secondary.call-out,
.bg-primary.call-out {
    color: #FFF;
    font-size: 18px;
    padding: 1em;
    margin-bottom: 1em;
}

.poster .row.call-out {
    font-size: 16px;
    margin-bottom: 0em;
}

.bg-green.call-out .btn:hover a {
    color: #00AB84;
}

.bg-green.call-out .btn:hover {
    background-color: #FFF;
    color: #00AB84;
}

.bg-green.cinco-form {
    color: #FFF;
    padding: 20px;
}

/* ------------indigenous styles-------------- */

.indigenous#upcoming-events-listing .upcoming-event:nth-child(2n+1) .event-square {
    background-color: #D73D34;
}

    .indigenous#upcoming-events-listing .upcoming-event:nth-child(2n+1) .event-square:after {
        border-left: 8px solid #D73D34;
    }

.indigenous#upcoming-events-listing .event-square {
    background-color: #de6059
}

    .indigenous#upcoming-events-listing .event-square:after {
        border-left: 8px solid #de6059;
    }

.indigenous.landing-page-banner {
    background: url(/img/abstract-shield-background-indigenous.jpg) #272525;
    background-size: cover;
}

.indigenous h1 {
    color: #272525;
}

.indigenous h2,
.indigenous h3 {
    color: #D73D34;
}

.bg-dark-gray .contact a,
.bg-primary.contact a,
.bg-primary.contact,
.bg-primary.contact h3,
.bg-primary .contact a {
    color: #FFF;
}

.bg-dark-gray h2 {
    border: 0;
    color: #FFF;
}

.bg-i-yellow {
    background-color: #FEDF49;
    border-bottom: 30px solid #D73D34;
}

    .bg-i-yellow h2 {
        color: #4A4A4A;
    }

    .bg-i-yellow .btn {
        border: 2px solid #FFF;
        border-radius: 0px;
        border-top-right-radius: 14px;
        width: 100%;
    }

        .bg-i-yellow .btn a {
            color: #272525;
            padding-left: 2em;
            font-family: var(--bs-font-sans-serif);
            font-size: 16px;
            font-weight: 500;
        }

    .bg-i-yellow .col-sm-6 {
        padding-top: 1em;
        padding-bottom: 1em;
    }

/* ------------end indigenous styles-------------- */

/* Secondary search bar */
/* seacrh parent div */
.secondary-search {
    background-color: #005587;
    border-top-left-radius: 9px;
    color: white;
    display: inline-block;
    font-family: var(--bs-font-sans-serif);
    width: 100%;
}

    .secondary-search input,
    .secondary-search select {
        border-top-left-radius: 9px;
        font-size: 20px;
        height: 45px; /*100%; */
        flex: 1; /* let the search textfield stretch/shrink responsively (except in Firefox) */
        min-width: 1px; /* let the search textfield stretch/shrink responsively in Firefox */
    }

@media(min-width: 768px) {
    .secondary-search input, .secondary-search select {
        width: 100%;
    }
}

.secondary-search input,
.secondary-search button,
.secondary-search select {
    background-color: transparent;
    border: 0;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
}
/* Bulletproof cross-browser dropdown thanks to https://codepen.io/bdan/pen/WxWjLE */
.secondary-search.month-search {
    background-color: #0076a8;
    position: relative;
    margin-top: 20px;
}

    .secondary-search.month-search:after {
        content: '';
        position: absolute;
        top: 0;
        width: 0;
        height: 0;
        right: 10px;
        bottom: 0;
        margin: auto;
        border-style: solid;
        border-width: 8px 8px 0 8px;
        border-color: white transparent transparent transparent;
        pointer-events: none;
    }

    .secondary-search.month-search:before {
        width: 30px;
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: 1px;
        background: #0076a8; /* can't use transparent here, or browser defaults show in IE */
        content: '';
        pointer-events: none;
    }

.secondary-search select {
    background-color: #0076A8; /* needed for the dropdown items' background */
    width: 100%;
    /* remove browser defaults in Safari and Firefox */
    -webkit-appearance: none;
    -moz-appearance: none;
}

.secondary-search > .form-group {
    float: left;
    margin-bottom: 0;
    width: 100%;
    flex-flow: row; /* line up items in firefox */
}

.secondary-search input::-webkit-input-placeholder {
    color: white;
    opacity: 1;
}

.secondary-search input:-moz-placeholder {
    color: white;
    opacity: 1;
}

.secondary-search input::-moz-placeholder {
    color: white;
    opacity: 1;
}

.secondary-search input:-ms-input-placeholder {
    color: white;
    opacity: 1;
}

.secondary-search .btn-search {
    float: right;
    background-image: url('/img/icons/Solid/White/ui_search_solid_w-60.png');
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: center center;
    font-size: 0;
    height: 43px;
    width: 35px;
}
/* End of Secondary Search items */

.online-courses {
    border: 1px solid #DCDCDC;
    font-family: var(--bs-font-sans-serif);
    padding: 0;
}

    .online-courses h3 {
        background-color: #0076A8;
        color: #FFF;
        margin: 0;
        padding: 30px;
    }

    .online-courses div {
        border-bottom: 1px solid #DCDCDC;
        padding: 26px 30px;
    }

        .online-courses div p {
            margin-bottom: 4px;
        }

        .online-courses div > p:nth-child(1) {
            color: #0076A8;
        }

        .online-courses div .online-time {
            color: #9B9B9B;
            font-size: 13px;
            float: right;
        }

/* -------------------------------------------- */
/* ------------program map styles-------------- */
/* -------------------------------------------- */


.container.program-map {
    max-width: 1800px;
    font-family: var(--bs-font-sans-serif);
}

.program-map .program-title {
    font-size: 2em;
}

.program-map .program-code {
    font-size: 2em;
}

.program-map .program-catalog {
    font-size: 2.6em;
}

.program-map .program-identifier {
    border-bottom-left-radius: 2em;
}

    .program-map .program-identifier h2 {
        margin: 1em;
    }

.program-map .card {
    border-top-right-radius: 1em;
    margin-top: 1em;
}

.program-map .card-body {
    min-height: 70px;
}

.program-map .card-header {
    background-color: #005587;
    border-top-right-radius: 1em;
    color: #FFF;
    margin-top: 0em;
}

.program-map .list-group .list-group-item .has-requisites {
    padding: 1px;
}

.program-map .card-title {
    color: #272525;
    font-size: 14px;
    margin: 0em;
}

.program-map .pre-req,
.program-map .co-req,
.program-map .pre-co-req {
    background-color: rgba(0, 171, 132, 0.12);
    font-size: 13px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.program-map .co-req {
    background-color: rgba(0, 169, 224, 0.21);
}

.program-map .pre-co-req {
    background-color: rgba(0, 255, 255, 0.12);
}

.program-map-legend .card-title {
    font-size: 18px;
}

.program-map-legend .card-text {
    font-size: 14px;
}

/* -------------------------------------------- */
/* -----------impersonation styles------------- */
/* -------------------------------------------- */

.impersonation {
    background-color: transparent;
    color: transparent;
    font-weight: bold;
    padding: 5px;
    text-align: center;
    width: 100%;
    height: 2.25em;
}

.impersonation-message {
    background-color: rgba(220, 53, 69, 0.9);
    color: white;
    position: fixed;
    z-index: 10000;
    top: 0;
}

/* === HRIS Manage Employee Styles ===*/
.manage-employee {
    background-color: transparent;
    color: transparent;
    font-weight: bold;
    padding: 5px;
    text-align: center;
    width: 100%;
    height: 2.25em;
}

.manage-employee-message {
    background-color: #FFD100;
    color: black;
    position: fixed;
    z-index: 10000;
    bottom: 0;
}

/* === FOOTER STYLES === */
footer, #footer {
    font-family: var(--bs-font-sans-serif);
    background-color: #d4e7f0; /* fallback */
    background: linear-gradient(0deg, rgba(255,255,255,1)0%, rgba(212,231,240,1) 100%);
    margin-top: 30px;
    padding-top: 60px;
    padding-bottom: 30px;
}

    footer a, #footer a {
        color: #005587;
        text-decoration: none;
    }

    footer .small a {
        text-decoration: underline !important;
    }

    footer a:hover, #footer a:hover {
        color: #0076a8;
    }

    footer a:active, footer a.focus,
    #footer a:active, #footer a.focus {
        color: #00a9e0;
    }

    #footer .footer-menu {
        font-weight: 500;
        width: 100%;
        float: none;
        -webkit-column-count: 2;
        column-count: 2;
    }

        #footer .footer-menu .menu-item {
            display: inline-block;
            margin-top: 15px;
        }

    #footer .btn:hover {
        color: #FFF;
    }

    /*  ------------------------------------------
    ------------- SMALL DEVICES --------------
    (landscape phones, 576px and up)
    ------------------------------------------ */

    @media (min-width: 576px) {
        #top-links {
            border-bottom-left-radius: 2em;
            font-size: 13px;
            width: auto;
        }

            #top-links a.nav-item {
                display: flex;
            }

        ul.block-reg-legend > li {
            float: right;
        }

        .landing-page-banner p,
        .landing-page-title .h1,
        .landing-page-title h1 {
            font-size: 36px;
        }
    }

    /*  ------------------------------------------
    ------------- MEDIUM DEVICES --------------
    (tablets, 768px and up)
    ------------------------------------------ */

    @media (min-width: 768px) {

        .landing-page-banner {
            height: 70px;
        }

        a.btn-my-homepage {
            font-size: 13px;
        }

        #main-nav {
            background-color: #FFF;
            border-top: none;
            font-size: 11px;
        }

            #main-nav .nav-link {
                color: #4A4A4A;
            }

            #main-nav ul {
                position: relative;
            }

            #main-nav .nav-item.dropdown.show .nav-link {
                background-color: #FFF;
            }

            #main-nav ul .dropdown-menu {
                background-color: #FFF;
            }

            #main-nav ul > li.nav-item {
                border-bottom: none;
                position: static;
            }

            #main-nav ul li a {
                color: #005587;
                display: block;
                border: none;
                text-align: left;
            }

                #main-nav ul li a:hover {
                    color: #4A4A4A;
                }

            #main-nav .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
                display: block;
                visibility: visible;
            }

            #main-nav ul .dropdown-menu {
                padding: 0px;
                margin: 0px;
                border: none;
                -webkit-column-count: 3;
                -moz-column-count: 3;
                column-count: 3;
                -webkit-column-gap: 0;
                -moz-column-gap: 0;
                column-gap: 0;
                position: absolute;
                right: 0;
                min-width: 100%;
                border-radius: 0;
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
            }

            #main-nav ul .dropdown-item {
                background-color: #FFF;
                color: #0076A8;
                padding-top: 1.0em;
                padding-bottom: 1.0em;
                border-bottom: 1px solid rgba(0, 85, 135, 0.2);
                text-decoration: none;
                /* try to get menu items to not hop around*/
                width: 100%; /* Firefox 20+ */
                overflow: hidden; /* firefox */
                -webkit-column-break-inside: avoid; /* chrome, safari */
                page-break-inside: avoid; /* possibly firefox */
                break-inside: avoid-column; /* IE and Opera */
                text-align: left;
            }

                #main-nav ul .dropdown-item:last-child {
                    border-bottom: 1px solid rgba(0, 85, 135, 0.2);
                }

                #main-nav ul .dropdown-item a {
                    color: #0076A8;
                    font-size: 14px;
                    font-weight: 500;
                    padding-left: 20px;
                }

                #main-nav ul .dropdown-item:hover {
                    background-color: #E5F1F6;
                }

                #main-nav ul .dropdown-item a:hover {
                    background-color: transparent;
                    color: #4A4A4A;
                    text-decoration: none;
                }
        /* exam schedule styles */
        #exam-schedule table {
            display: table;
        }

        #exam-schedule thead {
            display: table-header-group;
        }

        #exam-schedule tbody {
            display: table-row-group;
        }

        #exam-schedule tr {
            display: table-row;
        }

        #exam-schedule thead tr {
            position: relative;
        }

        #exam-schedule td:first-child {
            background-color: transparent;
            color: #212529;
            padding-left: 12px;
        }

        #exam-schedule th,
        #exam-schedule td {
            display: table-cell;
        }

        #exam-schedule td {
            padding-left: 12px;
        }

            #exam-schedule td:nth-of-type(2):before,
            #exam-schedule td:nth-of-type(3):before,
            #exam-schedule td:nth-of-type(4):before,
            #exam-schedule td:nth-of-type(5):before {
                content: " ";
            }

        #timetable-list ul > li > ul:first-of-type:before,
        .schedule-list ul > li > ul:first-of-type:before {
            left: 11%;
            margin-top: 0.5%;
        }

        a.btn-highlight {
            background-color: #005587;
            background-image: url('../img/supportstaff-button-m.jpg');
            background-size: 360px;
            padding: 3em 2em;
            min-height: 180px;
        }

        .btn-highlight-row > div:nth-child(2n+1) .btn-highlight {
            background-color: #0076A8;
            background-image: url('../img/supportstaff-button-d.jpg');
        }

        .btn-highlight img {
            display: block;
            height: 50px;
            margin-bottom: 20px;
            width: 50px;
        }

        .btn-employee {
            background-position: 260px 32px;
            padding: 35px 330px;
        }

            .btn-employee:hover {
                background-position: 260px 32px;
            }

        .poster .indigenous.poster-image {
            height: 400px;
        }

        #error-page .col-md-8,
        #error-page .col-md-4 {
            display: block;
            min-height: 736px;
        }

        #error-page h2 {
            font-size: 100px;
        }
    }

    /*  ------------------------------------------
    ------------- LARGE DEVICES --------------
    (desktops, 992px and up) 
    ------------------------------------------ */

    @media (min-width: 992px) {

        #main-nav {
            font-size: 14px;
        }

        .landing-page-banner {
            height: 120px;
        }

        a.btn-highlight {
            font-size: 18px;
            padding: 60px 20px 0 40px;
            min-height: 210px;
        }

        #timetable-list .col-lg-4,
        .schedule-list .col-lg-4 {
            text-align: right;
        }

        a.btn-my-homepage {
            font-size: 16px;
        }

        .btn-employee {
            background-position: 29px 42px;
            padding: 45px 105px;
        }

            .btn-employee:hover {
                background-position: 29px 42px;
            }

        .indigenous.call-out h2 {
            font-size: 26px;
            margin-left: 20px;
        }

        .poster .vertical-align {
            display: flex;
        }

        .schedule-table thead {
            font-size: 16px;
        }

        #footer .footer-menu {
            width: auto;
            -webkit-column-count: initial;
            column-count: initial;
        }

            #footer .footer-menu .menu-item {
                display: inline-block;
                margin-top: 25px;
            }

        #footer .row-space {
            margin-top: 120px;
        }

        footer .row-space .col-md-3.col-xs-6 {
            margin-top: 0;
        }

        #error-page h2 {
            font-size: 140px;
        }
    }

    /*  ------------------------------------------
    --------- EXTRA LARGE DEVICES ------------
    (large desktops, 1200px and up)
    ------------------------------------------ */

    @media (min-width: 1200px) {

        .cinco-width {
            width: 1140px;
            margin-left: auto;
            margin-right: auto;
        }

        .poster .cinco-width > .col-12 > .row {
            margin-left: -4em;
            margin-right: -4em;
            padding-left: 3.1em;
            padding-right: 3.1em;
            padding-top: 5em;
            padding-bottom: 6em;
        }

        .poster .cinco-width .bg-light-blue.new-students {
            padding-bottom: 1em;
            padding-top: 1em;
        }

        #main-nav {
            font-size: 16px;
        }

            #main-nav ul .dropdown-item {
                font-size: 14px;
            }

        /* override bootstrap style */
        .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            background-color: transparent;
        }

        #main-area {
            max-height: 518px;
            overflow: auto;
        }

            /* Customization of the scroll bar */
            #main-area::-webkit-scrollbar {
                width: 10px;
            }

            /* track */
            #main-area::-webkit-scrollbar-track {
                background: #F2F2F2;
            }

            /* handle */
            #main-area::-webkit-scrollbar-thumb {
                background: #DCDCDC;
            }

                /* handle on hover */
                #main-area::-webkit-scrollbar-thumb:hover {
                    background: #9B9B9B;
                }

        div.container > #upcoming-events-listing {
            margin: 30px 0;
        }

        .btn-international {
            width: 8em;
        }

        .btn-employee {
            background-position: 58px 46px;
            padding: 48px 135px;
        }

            .btn-employee:hover {
                background-position: 58px 46px;
            }

        #sequence .seq-canvas {
            display: inline-block;
            height: 100%;
            width: 49%;
        }

            #sequence .seq-canvas > * {
                padding: 60px 70px;
            }

        .seq-prev, .seq-next {
            display: inline-block;
            width: 3%;
            z-index: 1;
        }

            .seq-prev:hover, .seq-next:hover {
                filter: brightness(125%);
                transition: all 0.2s ease;
            }

        .seq-next {
            float: right;
        }

        .poster > .row.cinco-width .row.poster-image {
            padding: 0em;
        }

            .poster > .row.cinco-width .row.poster-image img {
                min-width: 100%;
            }

        .poster > .row.cinco-width .row.call-out {
            font-size: 16px;
            margin-bottom: 0em;
        }

            .poster > .row.cinco-width .row.call-out > div {
                padding-left: 1em;
                padding-right: 1em;
            }

        #error-page .col-md-8,
        #error-page .col-md-4 {
            height: 780px;
        }

        #error-page h2 {
            font-size: 180px;
            margin-bottom: 0em;
        }
    }

@media print {
    @page {
        size: auto;
    }
}