/*Focus box must maintain 3:1 contrast with background */
.nav-link:focus, a:focus, input[type=submit]:focus, select:focus, input[type=button]:focus, .collapsible:focus, .modal div[role=dialog]:focus, button:focus, input[type=button]:focus, input[type=reset]:focus, input[type=submit]:focus {
    outline: 2px solid black;
}


/*Focus box must maintain 3:1 contrast with background (Somehow above selector was not inherited for selects)*/
.select select:active:not(.disabled), .select select:active:not(:disabled), .select select:focus:not(.disabled), .select select:focus:not(:disabled) {
    outline: 2px solid black;
}
/*Focus box must maintain 3:1 contrast with background, These rules correct mobile specific styles*/
.nav button.nav-burger:focus, .nav-vertical .nav-link:focus {
    outline: 2px solid black;
}

/*Focus box must maintain 3:1 contrast with background Checkboxes are implemented with :before voodoo magic typical selectors were unhelpful*/
.checkbox input[type=checkbox]:focus + label:before {
    outline: 2px solid black;
}
/*Focus box must maintain 3:1 contrast with background RadioButtons are also implemented with :before voodoo magic typical selectors were unhelpful*/
.radio input[type=radio]:focus + label:before {
    outline: 2px solid black;
}

/* Active user interface component lacks 3 to 1 contrast ratio */
.form-control, .checkbox label:before {
    border: .0625rem solid #8D9089;
}

/*E for Extra Fun: Touch target size less than 44px, I force all <a> tags to be at least 44px by 44px and center the text vertically*/
a {
    display: inline-block;
    min-height: 44px;
    min-width: 44px;
    line-height: 44px;
}

.btn{
    min-height:44px;
}

/*Touch target size rule doesn't apply to links in a block of text, paragraph links disable the css above*/
.p-link {
    min-height: unset;
    min-width: unset;
    line-height: unset;
}
/*Touch target size less than 44px. Had to introduce this hack to fix nav link focus box*/
.nav-link {
    line-height: unset;
}


/*Placeholder text lacks 4.5:1 contrast ratio*/
textarea.form-control::placeholder {
    color: #707275;
}

/*Motion animation cannot be disabled. This removes the moving animation from certain cards if the underlying OS has reduced motion on*/
@media (prefers-reduced-motion: reduce) {

    .card-actionable:hover {
        transform: unset;
    }
}
/*The decorative image is not hidden from screen readers*/
/*So for most screen readers pseudo elements like :before and :after are not read*/
/*Deque team seems to think that VoiceOver is reading this out. Without I can't validate they are wrong*/
/*This rule removes the existing carrot marking an input as a select*/
.select:after {
    content: none;
}
/*This rule is to be applied to a span directly following he select with a value of */
.selectIcon {
    font-family: "dls-icons-2.28.0";
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #53565a;
    font-size: 1rem;
    display: flex;
    align-items: center;
    position: absolute;
    top: 1.0625rem;
    right: 0;
    margin: auto .5rem;
    transition: color .25s ease-out;
}