/*  ===============
    NEW Classes 
===============  */

/* Skip link: this link is only visible when keyboard-focused
    There is one above the master page header
    Suggestion: add another skip link before large link lists or keyboard traps */
.skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background-color: transparent;
    color: transparent;
    transition: color .4s, background .4s;
}

    .skip-link:focus {
        top: auto;
        left: auto;
        width: 12em;
        width: max-content;
        height: auto;
        display: block;
        background-color: white;
        color: #0066CC;
        z-index: 9999;
        border: 1px solid #eee;
        box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05);
        padding: 5px 10px;
    }

/* SR ONLY: This visually works like display none but is read by assistive technology
    Handy for describing meaning of visual cues: 
    placeholder text(not ready by all assistive tech), icons, 
    and form fields that are implicit by layout */
.sr-only, .visually-hidden {
    width: 1px !important;
    height: 1px !important;
    padding: 0;
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    margin: -1px;
}

/* Tab focus: default indicator styles for keyboard-focusable elements
    Suggestion: also apply hover styles to focus (usually works well with this indicator combined)
    Can use .tab-focus class to add style to custom focusable elements */
.tab-focus:focus,
a:focus,
button:focus,
input[type="checkbox"]:focus,
input[type="color"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="file"]:focus,
input[type="image"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="radio"]:focus,
input[type="search"]:focus,
input[type="submit"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus,
.RadButton:focus,
.rtsLink:focus,
.rcbFocused:focus {
    outline: thin dotted;
    /* webkit */
    outline: 5px auto #4175a6;
    outline-offset: -2px;
}

/* Popover Menu */
.popover-toggle {
    border: none;
    cursor: pointer;
    background: transparent;
    padding: 0;
}
.popover-content {
    display: none;
}
.popover-content.active {
    display: block;
}
.popover-close {
    float: right;
}
.ally-shim .ListViewContextMenuContent {
    padding-bottom: 30px !important;
}

/*  =========================================
    SHIM Classes : Override Common.css 
=========================================  */
/* 
    The .ally-shim class:

    Used as a parent class to help identify locations
    in the markup (panels, sections, etc)
    where override styles should apply.

    This way, I'm not overridding all styles everywhere
    quite yet.

    When updating Common.css later, theoretically you
    should be able to replace the line item style rules,
    and later on do a solution search on this class 
    to remove it wherever found.
*/
/* 
    The importance of !important:
    
    I'm just using it here to make it easier to
    override these styles for accessibillity.

    When replacing these styles in common.css, we can
    hopefully dispense of the use if this mark.
*/
/*  Line 22
    Chris requested making the text larger and keeping the yellow */
.ally-shim .environmenttext {
    font-size: 24px;
}

/* Line 172
    Replace #A6A6A6 background color for contrast */
.ally-shim .panelCollapsibleContainer h2,
.panelCollapsibleContainerCollapsed h2 {
    background-color: #767676 !important;
}

/* Line 212 
    Used same color as WHM Search form panels
    Replace #e0e0e0 background color for contrast */
.divContainer {
    background-color: #EFEFEF !important;
}


/* Line 218
    Replace #efefef background color for contrast 
    (just a visual tweak to make the header look better with the container) */
.divContainerTitle {
    background-color: #f7f7f7 !important;
}

/* Line 249
    Darkening this in order to keep some contrast in comparison to placeholders */
.ally-shim .searchFormBoldFieldLabels {
    color: #595959 !important;
}

/* Line 660
    Replace #999999 text color for contrast */
.ally-shim .grey-small-light-text {
    color: #767676 !important;
}

/* Line 720+
    Replace #999999 text color for contrast */
.ally-shim .grey-small-light-link,
.ally-shim .grey-small-light-link:visited,
.ally-shim .grey-small-light-heavy-link,
.ally-shim .grey-small-light-heavy-link:visited {
    color: #767676 !important;
}

    /* Apply hover styles to focus as well */
    .ally-shim a:hover.grey-small-light-text,
    .ally-shim a:focus.grey-small-light-text,
    .ally-shim .grey-small-light-link:hover,
    .ally-shim .grey-small-light-link:focus,
    .ally-shim .grey-small-light-heavy-link:hover,
    .ally-shim .grey-small-light-heavy-link:focus {
        color: #0066CC !important;
    }

/*  Line 806
    Hover styles for help links
*/
.ally-shim .helpfiledetail:hover,
.ally-shim .helpfiledetail:hover span,
.ally-shim .helpfiledetail:focus,
.ally-shim .helpfiledetail:focus span {
    color: #222 !important;
    cursor: help;
    text-decoration: underline !important;
}

/* Line 865
    Darker red text color for contrast */
.formProminentWording {
    color: #d60000 !important;
}

/*  =========================================
    SHIM Classes : Menu.CustomMenu.css
=========================================  */

/*Lighter header focus*/
.banner.ally-shim .app-logo:focus {
    outline: 5px auto #B8D0EA !important;
    background-color: rgb(71, 115, 148) !important;
    display: block !important;
}

/*Lighter header focus*/
.menu.ally-shim div.RadMenu_CustomMenu .rmItem .rmLink:focus {
    background-color: rgb(71, 115, 148) !important;
    background-image: none !important;
    color: rgb(255, 255, 255) !important;
    outline: 5px auto #B8D0EA !important;
}


/*  =========================================
    SHIM Classes : Overriding Telerik style
=========================================  */
.ally-shim .RadInput_Default .riEmpty,
.ally-shim .RadInput_Empty_Default {
    color: #767676 !important;
}

.ally-shim .RadTabStrip_Simple .rtsLink:focus {
    background: #ffe79c;
    border-color: #c98400;
    color: #892500;
    outline: thin dotted;
    /* webkit */
    outline: 5px auto #4175a6;
    outline-offset: -2px;
}


/*Mimic Telerik styles for list box*/
.ally-shim .list-box {
    font-family: "Segoe UI", Arial, sans-serif;
    width: 200px;
    background: #fff;
    border: 1px solid #8e8e8e;
    color: #333;
}
.ally-shim .list-box option {
    padding: 4px 5px;
    font-size: 12px;
    line-height: 18px;
}