/*
    This file is for library overrides only.
*/

/* MWF controls */
.c-label {
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 5px;
    color: #000000;
}

input.c-text-field[type="text"] {
    background-color: transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #212121;
    box-sizing: border-box;
    padding-left: 0px;
    color: #000000;
}

input.c-text-field[type="text"][readonly] {
    border: none !important;
    color: #656565;
}

.c-select-menu[aria-disabled="true"] > button {
    color: #656565;
}

.c-select-menu.f-persist.f-border button {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid #212121;
}

.c-select-menu.f-border [aria-expanded]:focus:before {
    outline: none;
    border: none;
}

.c-menu-item span[aria-selected="true"] {
    background-color: #5d2e8f;
}

.c-select-menu > a:after, .c-select-menu > button:after {
    font-size: 12px;
}

/* Accessibility fix (Bug 1145901): Kendo DropDownList arrow font ("WebComponentsIcons")
   sometimes fails to load when bundled, causing the dropdown indicator to render as a
   "tofu" box instead of a down arrow. Override the icon glyph with a Unicode down arrow
   that does not depend on the custom icon font, so users can clearly recognize the field
   as a dropdown. */
.k-dropdown .k-select .k-icon,
.k-dropdown .k-dropdown-wrap .k-select .k-icon,
.k-dropdown .k-i-arrow-s,
.k-dropdown .k-i-arrow-60-down,
.k-dropdown .k-i-caret-alt-down {
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
}

.k-dropdown .k-select .k-icon::before,
.k-dropdown .k-dropdown-wrap .k-select .k-icon::before,
.k-dropdown .k-i-arrow-s::before,
.k-dropdown .k-i-arrow-60-down::before,
.k-dropdown .k-i-caret-alt-down::before {
    content: "\25BC" !important;
    font-family: inherit !important;
}


.c-checkbox input[type=checkbox] + span:before {
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.59);
}

a.c-call-to-action:not(.glyph-play):after {
    font-family: mwf-mdl2;
}

a.f-clear-purple {
    background-color: transparent;
    color: #5C2E91;
    border: 1px solid #5C2E91;
    font-weight: normal;
}

    a.f-clear-purple:hover:not(.f-lightweight):not([aria-disabled="true"]),
    a.c-call-to-action:focus:not(.x-hidden-focus),
    a.c-call-to-action:active {
        box-shadow: 0 4px 8px 0 rgba(0,0,0,.2) !important;
        background: rgba(0,0,0,0.1) !important;
        color: black !important;
    }

a.c-call-to-action:focus:not(.x-hidden-focus) {
    border: 2px solid black;
}

a.c-hyperlink {
    border: none;
    outline: none;
}

a.c-hyperlink:focus {
    border: 2px solid black;
}

button.c-glyph.glyph-search:focus {
    outline-offset: -5px;
}

button.c-action-toggle:focus {
    outline: 2px solid transparent;
    outline-offset: -5px;
}

button.c-button:focus:not(.x-hidden-focus):not(.f-lightweight):not([disabled]) {
    outline: 2px solid transparent;
    outline-offset: -5px;
}

a.c-button.f-purple:focus {
    outline: 2px solid transparent;
    outline-offset: -5px;
}

a.c-button:focus:not(.x-hidden-focus):not(.f-lightweight):not(.f-purple):not([disabled]) {
    outline: 2px solid transparent;
    outline-offset: -5px;
    color: black;
}

a.c-button.f-purple.c-call-to-action.c-glyph.x-hidden-focus:focus:not(.f-lightweight):not([disabled]) {
    outline: 2px solid transparent !important;
    outline-offset: -5px;
}

.c-pivot > header > [role="tab"], .c-pivot > header a, .c-pivot > div a, .c-pivot > [role="tablist"] > [role="tab"], .c-pivot > [role="tablist"] a {
    border: none;
    outline: none;
}

.c-pivot > header > [role="tab"]:focus, .c-pivot > header > a:focus, .c-pivot > div a:focus, .c-pivot > [role="tablist"] > [role="tab"]:focus, .c-pivot > [role="tablist"] a:focus {
    outline: 2px solid black;
}

.m-social > ul > li > a:focus {
    outline: 2px dashed black;
}
    
/* These dialog overrides are also useful for our NPS survey (2021-11-18) */
/* MWF Dialogs */
.c-dialog:not(.f-flow) [role="dialog"] > button.c-glyph {
    padding: 0;
    background: none;
    border: 0;
    position: absolute;
    width: 36px;
    height: 36px;
    right: 0;
    top: 0;
    color: #000;
    cursor: pointer;
    font-weight: 700;
}

.c-dialog:not(.f-flow) [role="dialog"] > .c-glyph:before {
    margin: 10px;
    vertical-align: middle;
}

/* MWF alerts */
.m-alert[role=alert] {
    background-color: #F3F2F1;
}

/* MWF extra glyphs */
.glyph-teams-icon {
    background: url('/Library/Images/Icons/teams_48x1.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
}

.glyph-person-icon {
    background: url('/Library/Images/Icons/person.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 18px;
    height: 23px;
    display: inline-block;
}

.glyph-computer-icon {
    background: url('/Library/Images/Icons/ComputerMac.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    display: inline-block;
}

.glyph-achievement-icon {
    background: url('/Library/Images/Icons/achievement.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 26px;
    height: 24px;
    display: inline-block;
}

/* Kendo dropdown */
.k-window-titlebar, .k-block > .k-header, .k-tabstrip-items .k-item, .k-panelbar .k-tabstrip-items .k-item, .k-tabstrip-items .k-link, .k-calendar-container.k-state-border-down, .k-list-container.k-state-border-down, .k-autocomplete.k-state-border-down, .k-multiselect.k-state-border-down, .k-dropdown-wrap.k-state-border-down, .k-picker-wrap.k-state-border-down, .k-numeric-wrap.k-state-border-down, .k-gantt-views.k-state-expanded, .k-gantt-views.k-state-expanded > .k-current-view {
    border-radius: 0 !important;
}

.k-state-focused, .k-list > .k-state-focused, .k-listview > .k-state-focused, .k-grid-header th.k-state-focused, td.k-state-focused, .k-dropdown-wrap.k-state-focused {
    box-shadow: none !important;
    border: 2px solid black !important;
    border-radius: 0 !important;
    outline: none !important;
}

.k-multiselect-wrap li {
    border-radius: 0 !important;
}

.k-multiselect.k-widget {
    background-color: transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #212121;
    padding-left: 0px;
}

.k-block, .k-textbox, .k-drag-clue, .k-touch-scrollbar, .k-window, .k-window-titleless .k-window-content, .k-window-action, .k-inline-block, .k-grid .k-filter-options, .k-grouping-header .k-group-indicator, .k-autocomplete, .k-multiselect, .k-combobox, .k-dropdown, .k-dropdown-wrap, .k-datepicker, .k-timepicker, .k-colorpicker, .k-datetimepicker, .k-notification, .k-numerictextbox, .k-picker-wrap, .k-numeric-wrap, .k-list-container, .k-calendar-container, .k-calendar td, .k-calendar .k-link, .k-treeview .k-in, .k-editor-inline, .k-tooltip, .k-tile, .k-slider-track, .k-slider-selection, .k-upload, .k-split-button .k-gantt-views, .k-gantt-views > .k-current-view {
    border-radius: 0 !important;
}

.fit-container.k-widget {
    background-color: #F9F9F9;
    padding-top: 19px;
}

    .k-autocomplete.k-state-default:not(.k-state-focused), .k-dropdown-wrap.k-state-default:not(.k-state-focused) {
        background: none !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid #212121 !important;
    }

.k-widget.k-dropdown > .k-dropdown-wrap > .k-input {
    padding: 5px 10px !important;
}

/* Detects high contrast mode in browser, changes icon color on Account Manage page for accessibility compliance */
@media (forced-colors: active) {
    .glyph-person-icon,
    .glyph-computer-icon,
    .glyph-achievement-icon {
        filter: invert(24%) sepia(68%) saturate(5296%) hue-rotate(339deg) brightness(80%) contrast(144%);
    }
}