/*-----------------------------------------------------*\
  -- 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: transparent;
    background-color: transparent;
    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;
}

.acc-keyboard-mode .span-embedded-footer-links a:focus {
    text-decoration: underline !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: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 {
    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;
}