﻿/*author: Eric Miller                                                                                                                                                         */
/*Date added: 06/29/23                                                                                                                                                 */
/*purpose: to store all styles used for Web Content Accessibility Guidelines WCAG across the entire site.*/
/*one spot for all styles related to accessibility                                                                                                         */


/*allows an element to be available to screen reader users while being hidden to regular users.*/
.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/*used to style a td as a th. This is important for consistent styling. 
    This is only used when a table header doesn't make sense when it is read with the columns below it to a sightless user.*/
.tableFixHead thead .tdAsTh {
    position: sticky;
    top: 0;
    z-index: 1;
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: rgb(222, 226, 230);
    border-top: 1px solid #dee2e6;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(222, 226, 230);
    padding: .75rem;
    background-color: #335984;
}

/*Reapplies hover styling that was lost when removing the nesting around the <a> navbar elements*/
.navHover a:hover {
    color: #8fcafa !important;
}



/*Start Attorney kiosk page ⚖----------------------------------------------------- */
/*The css below had to be added to keep the look of the page the same while adjusting the tabs markup for accessibillity update.*/
/*it has been modified to only apply to the attorney kiosk page so it doesn't mess anything else up. */
#vSignForm .nav-tabs > a.active, #vSignForm .nav-tabs > a:hover {
    background-color: #000;
    /*color: #000;
    border: 1px solid #DA0;*/
    background: black;
    background: -ms-linear-gradient(0deg, #4bb 50%, #000 100%);
    background: -moz-linear-gradient(0deg, #4bb 30%, #000 100%);
    background: -webkit-linear-gradient(0deg, #4bb 30%, #000 100%);
    background: linear-gradient(180deg, #DA0 0%, #000 80%);
    color: #DA0;
    border: 1px solid #444;
}

#vSignForm .dropdown > a.active, #vSignForm .dropdown > a:hover {
    background-color: #000;
    /*color: #000;
    border: 1px solid #DA0;*/
    background: black;
    background: -ms-linear-gradient(0deg, #4bb 50%, #000 100%);
    background: -moz-linear-gradient(0deg, #4bb 30%, #000 100%);
    background: -webkit-linear-gradient(0deg, #4bb 30%, #000 100%);
    background: linear-gradient(180deg, #DA0 0%, #000 80%);
    color: #DA0;
    border: 1px solid #444;
   text-decoration:none;
}

#vSignForm .nav-tabs > a {
    /*background-color: #000;
    color: #DA0;
    border: 1px solid #DA0;*/
    background-color: black;
    background: -ms-linear-gradient(0deg, #4bb 50%, #000 100%);
    background: -moz-linear-gradient(0deg, #4bb 30%, #000 100%);
    background: -webkit-linear-gradient(0deg, #4bb 30%, #000 100%);
    background: linear-gradient(0deg, #133 0%, #000 80%);
    color: #DA0;
    border: 1px solid #444;
    text-decoration:none;
}

#vSignForm .dropdown > a {
    background-color: black;
    background: -ms-linear-gradient(0deg, #4bb 50%, #000 100%);
    background: -moz-linear-gradient(0deg, #4bb 30%, #000 100%);
    background: -webkit-linear-gradient(0deg, #4bb 30%, #000 100%);
    background: linear-gradient(0deg, #133 0%, #000 80%);
    color: #DA0;
    border: 1px solid #444;
}

#vSignForm .nav > a {
    position: relative;
    display: block;
    padding: 10px 15px;
    float: left;
    margin-bottom: -1px;
}

#vSignForm .nav > .dropdown > a {
    position: relative;
    display: block;
    padding: 10px 15px;
    float: left;
    margin-bottom: -1px;
}

#tabSearch {
    float: left;
}


/*End Attorney kiosk page ⚖----------------------------------------------------- */


/*start attorney vacation page ✈🌴---------------------------------------------------------------*/

/*need this to duplicate old <th> styles when converting into <caption> tag*/
.vacationtable caption {
    border-right: solid 1px #929292;
    background-color: #0D3B88;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    line-height: 20px;
    padding:inherit;
    font-weight:600;
}

    .vacationtable caption.summer {
        background-color: #ebebeb;
        color: #0D3B88;
        white-space: nowrap;
        text-align: center;
        line-height: 20px;
        border-right: solid 1px #929292;
        border-top: solid 1px #929292;
        border-left: solid 1px #929292;
    }

div #fdstConfirm legend {

    font-size:0.85rem;

}

/*end attorney vacation page ✈🌴---------------------------------------------------------------*/


/*section 508 Accessibility page  -----------------------------------------------------------------*/

#Sec508Ctn #sec508Nav {
    background-color: #0055a5;
    font-weight: 400;
    padding: 2px 2px 20px 0px;
    font-size: 1.2rem;
    position: sticky;
    top: 100px;
    border-radius: 10px;
    font-family: Segoe UI, Arial, Helvetica, sans-serif;
}

    #Sec508Ctn #sec508Nav a {
        color: #ffffff;
    }

        #Sec508Ctn #sec508Nav a:visited {
            color: #D3d3d3;
        }

/*section 508 Accessibility page  -----------------------------------------------------------------*/