﻿/*-----------------------------------------------------*\
  -- FROM bootstrap-customV.css
\*-----------------------------------------------------*/

/*-----------------------------------------------------*\
	@FEED
\*-----------------------------------------------------*/

.acc-keyboard-mode .nav-tabs > li:focus-within > div > a { text-decoration: underline !important; }

/*-----------------------------------------------------*\
	@MODAL OBJECT
\*-----------------------------------------------------*/

.acc-keyboard-mode .modal-content button.close:focus,
.acc-keyboard-mode .modal-header button.close:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: -1px !Important;
    background-color: #ffffff;
    color: #000000;
}

.acc-keyboard-mode .modal-content button.close.textShadow:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: -1px !Important;
    text-shadow:0 1px 0 #fff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

/*-----------------------------------------------------*\
	@SKIPLINKS (top-left) only available via keyboard tab from URL bar into the page (or back-tab from hamburger)
\*-----------------------------------------------------*/

.skip-link-container-mobile {
    position: absolute;
    left: 0px;
    top: -2500px;
    height: auto;
    width: auto;
    border: none;
    outline: none;
    margin: 0;
    word-wrap: normal;
    color: #000000;
    background-color: #ffffff;
    z-index: 1;
}

.skip-link-container {
    position: absolute;
    left: 0px;
    top: -75px;
    height: auto;
    width: auto;
    border: none;
    border-bottom-right-radius: 6px;
    outline: none;
    /* box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.25); */
    box-sizing: border-box;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    margin: 0;
    padding: 12px;
    word-wrap: normal;
    color: #000000;
    background-color: #ffffff;
    transition: top .25s ease-out;
    z-index: 99999998;
}

.skip-link-container:focus, .skip-link-container:focus-within {
    top: 0px;
    transition: top 0.5s ease-in;
}

.skip-link {
    position: relative;
    background-color: #ffffff;
    margin: 0;
    padding: 6px;
    z-index: -1;
}

.skip-link:focus {
    position: relative;
    z-index: 99999998;
}

/*-----------------------------------------------------*\
	@LABELS
\*-----------------------------------------------------*/

/* FUTURE look for a better solution for .ariaMarkerLinks */
.ariaMarkerLinks {
    pointer-events: none;
    cursor: default;
    position: absolute;
    top: -500px;
}

/* Info, Error and Warning Messages (top of main content area) */
.invisibleLabel {
    position: absolute;
    top: -500px;
}

/*-----------------------------------------------------*\
	@DATEPICKER
\*-----------------------------------------------------*/

.divAboveBelowDatePicker {
    width: 1px;
    height: 1px;
    overflow-x: hidden;
    overflow-y: hidden;
}

.spanAboveBelowDatePickerInTableCell {
    left: 100%;
    display: inline-block;
    position: fixed;
    color: #000000;
    background-color: #eeeeee;
    z-index: 0;
    width: 1px;
    height: 1px;
    border: none;
    outline: none;
}

.datePickerSkipForwardContainer {
    position: relative;
    display: inherit !important;
}

.acc-keyboard-mode .datePickerSkipForwardContainer > .spanAboveBelowDatePickerInTableCell:focus,
.acc-keyboard-mode .datePickerSkipForwardContainer > .divAboveBelowDatePicker:focus {
    display: block;
    position: absolute;
    bottom: -100%;
    left: 0;
    color: #000000;
    background-color: #eeeeee;
    z-index: 999999999;
    width: 194px;
    height: auto;
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: 0px !Important;
    padding: 5px;
    margin-bottom: 2px;
}

.datePickerSkipBackwardsContainer {
    position: relative;
    display: inherit !important;
}

.acc-keyboard-mode .datePickerSkipBackwardsContainer > .spanAboveBelowDatePickerInTableCell:focus,
.acc-keyboard-mode .datePickerSkipBackwardsContainer > .divAboveBelowDatePicker:focus {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    color: #000000;
    background-color: #eeeeee;
    z-index: 999999999;
    width: 194px;
    height: auto;
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: 0px !Important;
    padding: 5px;
    margin-top: 2px;
}


/*-----------------------------------------------------*\
	@MISCELLANEOUS
\*-----------------------------------------------------*/

.acc-keyboard-mode .badge:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: -1px !Important;
}

.acc-keyboard-mode a:focus > img {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: -2px !Important;
}

.acc-keyboard-mode a:focus > img[class^="bookmark"] {
    outline-offset: 2px !Important;
}

/*-----------------------------------------------------*\
	@TOPBAR @SIDEBAR
\*-----------------------------------------------------*/

/* TOP-BAR Sign In button focus visibility */

.acc-keyboard-mode .topbar .topbar__center ul.nav > li.active:focus-within {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: 0px !Important;
}

/* TOP-BAR Other button focus visibility */
.acc-keyboard-mode .topbar ul.nav > li.active:focus-within .topbar__menu-text {
    text-decoration: underline;
}

.acc-keyboard-mode .topbar ul.nav > li > a:focus, .acc-keyboard-mode  .topbar ul.nav > li > button:focus {
    text-decoration: underline;
}

/* SIDEBAR focus visibility for active list item */
.acc-keyboard-mode #sidebar-menu li.active > a:focus > span.mdi + span {
    text-decoration: underline;
}

/* SIDEBAR focus for /feeds group image logo in the sidebar list items */
.acc-keyboard-mode #sidebar-menu li.active > a:focus > img.img--rounded + span {
    text-decoration: underline;
}

/* SIDEBAR focus for sub-menu items */
.acc-keyboard-mode #sidebar-menu li.active > ul.nav > li.active > a.active:focus {
    text-decoration: underline;
}

/* TOP BAR account dropdown - edit profile pencil icon (btn-icon) */
.acc-keyboard-mode li.topbar__cont--user a.btn-icon:focus {
    color: #000000 !important;
}
.acc-keyboard-mode li.topbar__cont--user a.btn-icon:focus > span.mdi-pencil {
    color: #000000 !important;
}

/*-----------------------------------------------------*\
	@MISCELLANEOUS
\*-----------------------------------------------------*/

/* /groups Group Cards (My Groups) focus on the <a> surrounding the <img> (inside card div) */
.acc-keyboard-mode div.slick-track a.group-card:focus > div > h2 {
    text-decoration: underline;
}

/* OFFICER <img> clickable round profile photos focus visibility (reduced to generic img-list elements with keyboard focus) */
.acc-keyboard-mode .img-list:focus,
.acc-keyboard-mode a.img-list--more:focus,
.acc-keyboard-mode #feed__content--info div.card-block > div > h6 + a:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: 0px !Important;
}

/* OTHER focus highlighting */
.acc-keyboard-mode div.help-cont > a:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: 0px !Important;
}

/* FEEDS top bar keyboard focus on active tab */
/* .acc-keyboard-mode #feed__group-tabs-ul > li.active > a:focus { text-decoration: underline; } */

/* TOP OF MAIN CONTENT <span id="span-top-of-main-content--*"> visibility on keyboard focus */
.content__top-element {
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
    overflow: hidden;
    height: 1px;
    width: 1px;
    word-wrap: normal;
    display: inherit !important;
}

.acc-keyboard-mode .content__top-element:focus {
    display: block;
    position: absolute !important;
    clip: unset;
    overflow: auto;
    height: auto;
    width: auto;
    word-wrap: normal;
    color: #000000 !important;
    background-color: #ffffff !important;
    padding: 3px 7px;
    margin-top: 2px;
    border: 2px solid #000000;
    top: 0;
    left: 0;
    z-index: 999999999;
}












/*-----------------------------------------------------*\
  -- FROM FROM FooterBootstrap.ascx
\*-----------------------------------------------------*/

.acc-keyboard-mode #a-top-bar-logo:focus {
    outline: 2px solid <%=Session("btn_color")%>;
    outline-offset: -1px;
}

.acc-keyboard-mode #loginButton:focus {
    text-decoration: underline;
}

.acc-keyboard-mode form[name="login"] div.form-group input:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: -1px !Important;
}

.acc-keyboard-mode #remember_me:focus + #label_for_remember_me {
    text-decoration: underline;
}

.acc-keyboard-mode .a-footer-contact-links:focus {
    text-decoration: underline !important;
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}

.acc-keyboard-mode .span-embedded-footer-links a:focus {
    text-decoration: underline !important;
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}

.acc-keyboard-mode .btn.btn--school.btn--full-width:focus {
    text-decoration: underline !important;
}

.acc-keyboard-mode button.close:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: -1px !Important;
}

.acc-keyboard-mode .btn.active.focus,
.acc-keyboard-mode .btn.active:focus,
.acc-keyboard-mode .btn.focus,
.acc-keyboard-mode .btn:active.focus,
.acc-keyboard-mode .btn:active:focus,
.acc-keyboard-mode .btn:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: -1px !Important;
}

.acc-keyboard-mode #listing__filters-cont input#search_word:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: -1px !Important;
}

.acc-keyboard-mode #listing__filters-cont input.form-control:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: -1px !Important;
}

.acc-keyboard-mode #listing__filters-cont select#select_order:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: -1px !Important;
}

.acc-keyboard-mode #listing__filters-cont select.form-control:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: -1px !Important;
}

.acc-keyboard-mode select.form-control:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: -1px !Important;
}

.acc-keyboard-mode p.noOutlineOnFocus:focus {
    outline: none !important;
    border: none !important;
}

.acc-keyboard-mode div.tagSectionWrapper:focus,
.acc-keyboard-mode div.tagSectionWrapper:focus-within {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: 0px;
}

.acc-keyboard-mode p.h6:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: 0px;
}

.acc-keyboard-mode div.info-tabstop:focus,
.acc-keyboard-mode div.info-tabstop:focus-within {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: 0px;
}

.acc-keyboard-mode a.btn-icon:focus > span {
    color: #333 !important;
}

.acc-keyboard-mode p.rsvp__event-tags a:focus span.label {
    text-decoration: underline;
}

.acc-keyboard-mode li.list-group__separator h2:focus {
    text-decoration: underline;
}

.acc-keyboard-mode #page-cont h1:focus {
    text-decoration: underline;
}

.acc-keyboard-mode #page-cont h2:focus {
    text-decoration: underline;
}

.acc-keyboard-mode div.card > a:focus .card-block__title h3 {
    text-decoration: underline;
    text-decoration-style: solid;
}

.acc-keyboard-mode div.checkbox:focus-within {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: 2px;
}

.acc-keyboard-mode div.alert:focus-within {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: 2px;
}

.acc-keyboard-mode .acc-focus-inside:focus,
.acc-keyboard-mode .acc-focuswithin-inside:focus-within {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: -2px;
}

.acc-keyboard-mode .acc-focus-outside:focus,
.acc-keyboard-mode .acc-focuswithin-outside:focus-within {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: 2px;
}





/*-----------------------------------------------------*\
	@UNUSED (delete these after verifying they're not used anywhere)
\*-----------------------------------------------------*/

.ariaDescribedByLabelHidden {
    position: absolute;
    bottom: 500px;
    width: 1px;
    height: 1px;
    overflow-x: hidden;
    overflow-y: hidden;
}


/*-----------------------------------------------------*\
	TOPBAR
\*-----------------------------------------------------*/

.acc-keyboard-mode #searchlist_groups_input:focus,
.acc-keyboard-mode a.group_links:focus,
.acc-keyboard-mode a.header__group--manage:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: 2px;
}

.acc-keyboard-mode #header__search-dropdown #searchlist_input:focus,
.acc-keyboard-mode #bookmark__cont a:focus,
.acc-keyboard-mode #bookmark__cont button:focus,
.acc-keyboard-mode #bookmark__cont input:focus,
.acc-keyboard-mode #all_notifications a:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: -2px;
}

.acc-keyboard-mode.enlarged #sidebar a.active:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: -2px;
}

.acc-keyboard-mode .label-tag:not([role="group"]):focus-within {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: 2px;
}

/* page.js Slick slideshow prev/next buttons (h2 elements) */
.acc-keyboard-mode h2.slick-arrow:focus, .acc-keyboard-mode h2.slick-arrow:focus-within {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: 2px !important;
}

/* Group/Feeds Main Content Tabs : focus for non-active tabs */
.acc-keyboard-mode #feed__group-tabs .nav > li > a:focus, .acc-keyboard-mode #feed__group-tabs .nav > li > div.btn-group:focus-within {
    background-color: #ddd;
    text-decoration: underline;
}

/* Group/Feeds Main Content Tabs : focus for active tab */
.acc-keyboard-mode #feed__group-tabs .nav > li.active > a:focus {
    background-color: #fff;
}

/* Force underline (ex. link) on focus when acc-keyboard-mode enabled */
.acc-keyboard-mode .acc-underline-on-focus:focus, .acc-keyboard-mode .acc-underline-on-focus:focus-within, .acc-keyboard-mode .acc-underline-on-focus:focus h2, .acc-keyboard-mode .acc-underline-on-focus:focus-within h2 {
    text-decoration: underline !important;
}

/* Focus visibility for topbar search, sustainability, bookmarks and notification dropdowns/buttons */
.acc-keyboard-mode #header__search-icon:focus > span::before,
.acc-keyboard-mode a.topbar__menu.sustainability:focus > span::before,
.acc-keyboard-mode #header__bookmark-icon:focus > span.mdi-star::before,
.acc-keyboard-mode #header__notif-icon:focus > span.mdi-bell::before,
.acc-keyboard-mode #header__notif-icon:focus > notification-menu-icon > button {
    border-bottom: 2px solid #000000;
}

/* Focus visibility - add outline to the pencil icon when acc-keyboard-mode is active */
.acc-keyboard-mode a.btn-icon:focus > span.mdi-pencil::before {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: 3px !important;
}

/* Topbar notifications dropdown - focus visibility for feed notifications */
.acc-keyboard-mode #all_notifications div.notification-cg--details:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: 3px !important;
}

/*-----------------------------------------------------*\
	WEB BUILDER
\*-----------------------------------------------------*/

.web-builder__button--manage:focus {
    outline: 2px solid Highlight !important;
    outline: 2px solid -webkit-focus-ring-color !important;
    outline-offset: 3px !important;
}

/* Topbar Search Dropdown (focus visibility for search results) */
.acc-keyboard-mode ul#header__search-cont li.header__dd--item a:focus {
    outline: 2px solid #000000 !important;
    outline-offset: 3px !important;
}

/*-----------------------------------------------------*\
	VPAT UPDATES 2024-Q4
\*-----------------------------------------------------*/

/* Alert info links in plain text (not a button link) */
.alert.alert-info a {
    color: #2e6ca3;
}
.alert.alert-info a:hover, .alert.alert-info a:focus {
    color: #2e6ca3;
}
/* Alert info button links (a.btn) */
.alert.alert-info a.btn {
    color: #ffffff;
}
.alert.alert-info a.btn:hover, .alert.alert-info a.btn:focus {
    color: #ffffff;
}
/* Alert info link focus visibility for keyboard users */
.acc-keyboard-mode .alert.alert-info a:focus {
    outline: 2px solid #000000;
    outline-offset: 2px;
}

/* Badge text color for light backgrounds to meet 4.5:1 contrast ratio guidelines */
a.badge.dark-text {
    color: #000000 !important;
}

/* Tag text color for light backgrounds to meet 4.5:1 contrast ratio guidelines */
.label.label-tag.dark-text, .label.label-tag.dark-text > span, .label.label-tag.dark-text > a  {
    color: #000000 !important;
}
/* Tracks & Checklist track text color for light backgrounds to meet 4.5:1 contrast ratio guidelines */
.track__header.dark-text {
    color: #000000 !important;
}

/* CG-5026 Alerts - override link color for .alert-success in alerts.less:59 reduce from #3071ab (same hue/saturation but reduced lightness) */
.alert-success a {
    color: #2e6ea5;
}


/* CG-4319 Hub Switcher focus visibility for standard topbar */
.acc-keyboard-mode .topbar #header__switch:focus {
    outline: 3px solid #ffffff;
}
/* CG-4319 Hub Switcher focus visibility for light topbar */
.acc-keyboard-mode .topbar.topbar--light #header__switch:focus {
    outline: 3px solid #000000;
}
/* CG-4319 Hub Switcher focus visibility the dropdown (search and list items) */
.acc-keyboard-mode ul#header__switch-cont a:focus h1, ul#header__switch-dropdown input:focus {
    outline: 2px solid #000000 !important;
    outline-offset: -2px;
}

/* Keyboard mode focus visibility for input and textarea elements */
.acc-keyboard-mode input:focus,
.acc-keyboard-mode textarea:focus {
    outline: 2px solid #000000 !important;
    outline-offset: 2px;
}

/* Paste List Button Icons */
.acc-keyboard-mode a.btn-default > .mdi-content-paste:focus {
    outline: 2px solid #000000 !important;
    outline-offset: 2px;
}

/* Global for list page list item title links */
.acc-keyboard-mode div.listing-element div.media-body h2 a:focus,
.acc-keyboard-mode div.listing-element div.media-body h3 a:focus {
    border-bottom: 2px solid #000000;
    outline: none !important;
    text-decoration: none;
}

/* Global for list page list item sub links */
.acc-keyboard-mode div.listing-element div.media-body .h5 a:focus {
    border-bottom: 2px solid #000000;
    outline: none !important;
    text-decoration: none;
}

/* Global for list item buttons (ex. tags) */
.acc-keyboard-mode div.listing-element div.media-body a[role="button"]:focus span.label {
    outline: 2px solid #000000 !important;
    outline-offset: 2px;
}

/* Home > [My Courses | My Schedule] (widgets) */
.acc-keyboard-mode cg-pages-academic-widget a:focus {
    text-decoration: underline !important;
}

/* Home > Hi, {username} ! See what's happening (dropdown) */
.acc-keyboard-mode .section.section-user-my-profile .dropdown-countries > button:focus {
    outline: 2px solid #000000 !important;
    outline-offset: 2px;
}

/* clickable img elements (onclick) with no surrounding link or clickable container */
.acc-keyboard-mode img.img-cg--key-focus-visible:focus {
    outline: 2px solid #000000 !important;
    outline-offset: 2px;
}

/* TUI (Toast UI) Calendar CSS override */
span.tui-full-calendar-dayname-date {color: #767676 !important; }
span.tui-full-calendar-dayname-name {color: #767676 !important; }
div.tui-full-calendar-timegrid-hour {color: #767676 !important; }
.body-background p.media-heading.grey-element {color: #6e6e6e !important; }
div.tui-full-calendar-timegrid-hourmarker div.tui-full-calendar-timegrid-todaymarker {color: #f1f1f1 !important; }