/* Base styles */

@font-face {
  font-family:Inconsolata;
  src: url('/assets/fonts/Inconsolata.eot');
  src: url('/assets/fonts/Inconsolata.eot?#iefix') format('embedded-opentype'),
       url('/assets/fonts/Inconsolata-Regular.ttf') format('truetype'), 	
       url('/assets/fonts/Inconsolata.woff') format('woff'),
       url('/assets/fonts/Inconsolata.otf') format('opentype'),
       url('/assets/fonts/Inconsolata.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family:Inconsolata;
  src: url('/assets/fonts/Inconsolata-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

:root {
    font-size: 16px;
}

body {
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    font-weight: 500;
    margin: 0.9375rem 0;
}

h1 {
    font-size: 2.125rem;
    color: #003349;
    margin: 0;
}

h2 {
    font-size: 1.25rem;
    color: #003349;
}

h3 {
    font-size: 1rem;
    color: #1e1e1e;
}

h4 {
    font-size: 0.9375rem;
    color: #225a9b;
}

h5 {
    font-size: 0.875rem;
    color: #254973;
}

h6 {
    font-size: 0.75rem;
}

p,
a,
code,
kbd,
pre,
samp,
li,
dd,
dt,
td,
th,
div {
    font-size: 0.969rem;
    color: #1e1e1e;
    font-weight: 400;
}

p {
    margin-bottom: 0.875rem;
}

a {
    text-decoration: underline;
}
main a:has(img) {
    text-decoration: none;
    border: 0;
}

ul {
    margin-bottom: 1.4rem;
}

label {
    font-size: 0.9375rem;
    color: #666;
    color: #595959;
    font-weight: 400;
}

.content {
    clear: left;
    margin-left: 0.9375rem;
    margin-bottom: 1rem;
    padding-right: 1.875rem;
}

pre code {
    margin-bottom: 1rem;
}

pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    /* css-3 */
    white-space: -moz-pre-wrap;
    /* Mozilla, since 1999 */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
}

dt {
    font-weight: bold;
}

dd {
    display: block;
    margin-left: 30px;
}


/*
.deque-expander .deque-expander-summary:focus,
.deque-expander .deque-expander-summary:hover {
  background: #ffffff;
  color: #1e1e1e;
  border: 2px solid #1e1e1e;
  outline: #000000 dashed 1px;
}
*/

[role='button'].deque-button,
input[type='reset'].deque-button,
input[type='submit'].deque-button,
input[type='image'].deque-button {
    border: 2px solid #1e1e1e;
    border-radius: 4px;
    background: #ffffff;
    color: #1e1e1e;
    padding: 14px 12px;
}

[role='button'].deque-button.deque-button-toggle[aria-pressed='true']::before {
    font-size: 20px;
    font-weight: 700;
    padding-right: 0;
    color: #079107;
}

[role='button'].deque-button.deque-button-toggle,
[role='button'].deque-button-toggle
/*.deque-expander .deque-expander-summary:hover*/

{
    float: left;
    margin-right: 1rem;
    min-width: 100px;
    text-align: center;
    font-size: 1.25rem;
}

[role='button'].deque-button.deque-button-toggle[aria-pressed='true'] {
    margin-bottom: 3rem;
    background: #ffffff;
    color: #1e1e1e;
    border: 2px solid #1e1e1e;
}


/*
.deque-expander .deque-expander-content {
  position: absolute;
  margin-top: 4rem;
  padding-left: 0;
  padding-right: 0;
}

.deque-expander .deque-expander-content p {
  color: #006837;
  font-size: 1rem;
}

.deque-expander.form
  [role='button'].deque-button.deque-button-toggle[aria-pressed='true']::before {
  font-family: mwf-glyphs;
  content: '\E711';
  font-size: 20px;
  font-weight: 700;
  padding-right: 0;
  color: #e81010;
}

.deque-expander.form .deque-expander-content {
  position: relative;
  margin-top: 0;
  padding-left: 0;
}

.deque-expander.form .deque-expander-content p {
  font-size: 1rem;
}
*/

.site-content li {
    padding: 0;
}

textarea {
    display: inline-block;
    height: auto;
    color: #1e1e1e;
    border: 2px solid #1e1e1e;
    border-radius: 4px;
    box-shadow: none;
    transition: none;
    width: 100%;
    padding: 1rem;
}

textarea:focus {
    border: 1px #333 solid !important;
    outline: 2px solid #467310 !important;
    outline-offset: 1.5px;
}

.top-bar .site-branding {
    padding-top: 0;
}

.top-bar .site-branding p {
    padding-left: 0;
}

.top-bar .site-branding img {
    padding: 1rem;
}

.top-bar .site-branding .site-title a.logo {
    max-width: 20rem;
}

.page-section {
    padding: 0;
}

#contentwrapper {
    padding: 0;
}

.container {
    padding: 0;
}

.container .row {
    margin: 0;
}

.rule-info {
    display: flex;
    margin-bottom: 0.9375rem;
}

.aside .ruleInfo.m-card {
    padding-bottom: 1rem;
    margin-top: 0;
}

.ruleId,
.ruleSet,
.ruleVersion,
.ruleImpact {
    padding-right: 1.5625rem;
}

abbr[title] {
    text-decoration: none;
    cursor: default;
}

.content h2 {
    font-size: 1.125rem;
    color: #ffffff;
    background-color: #1e77bc;
    margin-left: -0.9375rem;
    margin-top: 0;
    height: 33px;
    padding: 0.3rem 0.625rem;
}

.rule-info span {
    font-size: 0.9375rem;
}

.howToFix,
.ruleDescription,
.ruleDescriptionAxe,
.ruleAlgorithm,
.relatedPages,
.ruleHelpful {
    margin-bottom: 1rem;
    clear: both;
}

.relatedPages h3 {
    margin-top: 0.5rem;
}

.relatedPages .logo {
    max-width: 20%;
    float: left;
    height: 45px;
    margin-top: -3px;
}

.relatedPages .links {
    max-width: 75%;
    float: left;
    margin-left: 2rem;
}

.relatedOther,
.relatedDeque,
.relatedGitHub {
    clear: both;
    padding-top: 1rem;
}

.relatedDeque {
    min-height: 100px;
}

.relatedPages .logo img {
    max-width: 100px;
}

.aside {
    width: 32%;
    padding-right: 0.9375rem;
    float: right;
    margin-left: 0;
}

.aside h3 {
    font-size: 1rem;
    color: #003349;
    width: 100%;
    margin: 1rem 0 0.5rem 0;
}

.aside .m-card {
    max-width: 100%;
    margin: 0.9375rem auto 1rem;
}

.aside .m-card-body {
    text-align: left;
    width: 100%;
    float: left;
    min-height: 0;
    padding: 1rem 2rem;
}

.aside .m-card-body span,
.aside .m-card-body p,
.aside .left-break .m-card-body div {
    text-align: left;
    font-size: 1rem;
    color: #1e1e1e;
    font-weight: 300;
    /* margin-bottom: 1rem; */
    margin-bottom: 0.2rem;
}

.aside .m-card-body h2 {
    text-align: center;
}

.aside .right-break {
    display: flex;
}

.aside .m-card-body .disabilityTypesAffectedData li,
.aside .m-card-body .ruleTypeWcag2 li {
    font-weight: 400;
}

.aside .cta-dark-blue-bg {
    background-color: #003349;
}

.aside .cta-title {
    margin-top: 0.9375rem;
}

.aside .hs-button.md,
.aside .btn.md {
    min-width: 100%;
    margin: 0.25rem 0 0;
}

.aside .newsletter {
    width: 100%;
}

.aside .m-card-body.next-card {
    margin-top: -1.5rem;
}

.site-footer {
    text-align: center;
    padding: 0;
}

.site-footer img {
    max-height: 60px;
    margin-top: -0.5rem;
}

.site-footer ul {
    margin-bottom: 0.25rem;
}

.site-footer li::after {
    content: '|';
    padding-left: 1rem;
    color: #ffffff;
}

.site-footer li:last-child::after {
    content: '';
    padding-left: 0;
}

.site-footer .footer-info {
    margin: 0 2rem 2rem;
}

.userImpactGraphWrapper,
.userImpactGraphWrapper span {
    font-size: 0.75rem;
    width: 100%;
    float: left;
    position: relative;
    margin: auto;
    padding: 0;
    max-width: 500px;
}

.userImpactGraphWrapper {
    padding: 1rem 0 0 0;
}

.leastImpact {
    float: left;
}

.biggestImpact {
    float: right;
}

.userImpactGraphWrapper div {
    margin: 0;
    padding: 0;
}

.userImpactGraphWrapper div.userImpactGraph {
    width: 100%;
    border: 2px solid #4b4f54;
    border-radius: 8px;
    background-color: #4b4f54;
    height: 14px;
    box-sizing: border-box;
    margin: 0 12px 0 0;
    padding: 0;
}

.userImpactGraphWrapper div.userImpactGraphOuter {
    width: 100%;
    box-sizing: border-box;
    padding: 0 7px;
}

.userImpactGraphWrapper div.userImpactGraphBar {
    height: 10px;
    clear: both;
    box-sizing: border-box;
    border-radius: 8px;
    margin: 0;
    padding: 0;
}

.userImpactGraphBar.Critical {
    width: 100%;
    background-color: #ed5959;
}

.userImpactGraphMarker.Critical {
    left: 45%;
}

.userImpactGraphBar.Serious {
    width: 75%;
    background-color: #f3826b;
    border-right: 1px solid #4b4f54;
}

.userImpactGraphMarker.Serious {
    left: 22%;
}

.userImpactGraphBar.Moderate {
    width: 50%;
    background-color: #ffdd76;
    border-right: 1px solid grey;
}

.userImpactGraphMarker.Moderate {
    left: -1%;
}

.userImpactGraphBar.Minor {
    width: 25%;
    background-color: #d3dde0;
    border-right: 1px solid grey;
}

.userImpactGraphMarker.Minor {
    left: -25%;
}

.userImpactGraphWrapper .userImpactGraphMarker {
    height: 11px;
    line-height: 1rem;
    text-align: center;
    clear: both;
    font-size: 0.875rem;
    position: relative;
    top: -18px;
    width: 100%;
}

.dot {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: -2px;
    margin-left: 2px;
    background-color: #4b4f54;
    border: 1px solid #4b4f54;
}

.dot-critical {
    background-color: #ed5959;
}

.dot-serious {
    background-color: #f3826b;
}

.dot-moderate {
    background-color: #ffdd76;
}

.dot-minor {
    background-color: #d3dde0;
}

body code,
body pre {
    font-family: Inconsolata, Consolas, 'Courier New', Courier, monospace;
    -moz-osx-font-smoothing: auto;
    -webkit-font-smoothing: auto;
    line-height: 1.8;
}

body pre code {
    color: #e6e1dc;
}

body pre code .highlight,
body pre code mark {
    background-color: #000000;
    border: 1px solid #ab8d02;
    color: #e6e1dc;
    margin: 2px;
    padding: 2px;
}

.note {
    margin: 20px 0;
    padding: 25px 28px 10px;
    background: #fafafa;
    border: 1px solid #dddddd;
}

.note h2,
.note h3,
.note h4 {
    margin-top: 0;
    padding-top: 0;
    font-size: 1.125rem;
    line-height: 2.1;
}

.note h2:before,
.note h3:before,
.note h4:before {
    display: block;
    content: ' ';
    background-image: url('/assets/images/icons/info-solid.svg');
    background-size: 7px;
    height: 38px;
    width: 38px;
    float: left;
    background-repeat: no-repeat;
    border: 2px solid #1e77bc;
    border-radius: 50%;
    background-position: center;
    margin-right: 0.75rem;
    background-color: #ffffff;
}

.example {
    margin: 20px 0;
    padding: 25px 28px 10px;
    background: #fafafa;
    border: 1px solid #dddddd;
}

.example h2,
.example h3,
.example h4 {
    margin-top: 0;
    padding-top: 0;
    font-size: 1.125rem;
    line-height: 2.1;
}

.example.bad h2:before,
.example.bad h3:before,
.example.bad h4:before,
.example h2.bad:before,
.example h3.bad:before,
.example h4.bad:before {
    display: block;
    content: ' ';
    background-image: url('/assets/images/icons/times-solid.svg');
    background-size: 14px;
    height: 38px;
    width: 38px;
    float: left;
    background-repeat: no-repeat;
    border: 2px solid #e00000;
    border-radius: 50%;
    background-position: center;
    margin-right: 0.75rem;
    background-color: #ffffff;
}

.example.good h2:before,
.example.good h3:before,
.example.good h4:before,
.example h2.good:before,
.example h3.good:before,
.example h4.good:before {
    display: block;
    content: ' ';
    background-image: url('/assets/images/icons/check-solid.svg');
    background-size: 16px;
    height: 38px;
    width: 38px;
    float: left;
    background-repeat: no-repeat;
    border: 2px solid #53a02c;
    border-radius: 50%;
    background-position: center;
    margin-right: 0.75rem;
    background-color: #ffffff;
}

fieldset {
    border: 1px solid #ccc;
    padding: 10px;
}

legend {
    font-size: inherit;
    border: none;
    width: auto;
    margin-bottom: 0;
}

table th {
    color: #1e1e1e;
}

table caption {
    color: #1e1e1e;
}

table.data,
main table {
    background-color: #fff;
}

table.data th,
main table th {
    background-color: #fafafa;
    color: #1e1e1e;
}

table.data th[scope=col],
main table th[scope=col] {
    border-bottom: grey 1px solid;
}

table.data th[scope=row],
main table th[scope=row] {
    border-right: grey 1px solid;
}

table.data,
table.data th,
table.data td,
main table,
main table th,
main table td {
    border-collapse: collapse;
    border: 1px solid #cccccc;
    vertical-align: top;
}

main #rulesList table td,
main #rulesList table th {
}

table.data td,
table.data th,
main table td,
main table th {
    padding: 4px;
}

table.data th,
main table th {
    font-weight: 700;
}

table.data td,
main table td {
    background-color: #fff;
}

.deque-wrapper #orText.sample .sampleLarge span {
    color: inherit !important;
    display: none !important;
}

.clear {
    clear: both;
}

.disabilityIcon {
    display: inline-block;
    width: 24px;
}

.call-to-action-section {
    background-color: inherit;
}

.m-card .m-card-background-image {
    padding-top: 0;
}

.m-card .m-card-background-image.m-card-bg-style-icon {
    height: 180px;
}

.m-card .m-card-background-image img {
    width: 100%;
    height: 180px;
    object-fit: contain;
}

.m-card .m-card-icon {
    line-height: 0;
    height: 150px;
    width: 150px;
    padding: 20px;
}

.m-card .m-card-body {
    min-height: 0;
}

.aside .m-card-body span.m-dot-group {
    margin-bottom: 2rem;
}

.aside .m-card-body .disabilityTypesAffected ul {
    list-style-type: none;
    margin-left: 18px;
    padding-left: 0;
}

.aside .m-card-body .disabilityTypesAffected li {
    list-style-type: none;
}

.colLeft {
    float: left;
    width: 48%;
}

.colLeftWide {
    float: left;
    width: 68%;
}

.colRight {
    float: right;
    width: 38%;
}

.colRightNarrow {
    float: right;
    min-width: 300px;
    margin-right: 20px;
    margin-left: 20px;
    max-width: 400px;
}

.colRightNarrow #deque-seller {}

[role='button'].deque-button.deque-button-toggle[aria-pressed='true']:hover::before,

/* .deque-expander.form */

[role='button'].deque-button.deque-button-toggle[aria-pressed='true']:hover::before,
.aside .cta-dark-blue-bg h2,
.aside .cta-dark-blue-bg span,
.aside .cta-dark-blue-bg p,
.hs-button.primary:focus,
.btn.primary:focus,
.site-footer a,
.site-footer .footer-info .copyright {
    color: #ffffff;
}

.hs-button.primary:focus::after,
.hs-button.primary:focus::before,
.btn.primary:focus::after,
.btn.primary:focus::before {
    border-color: #ffffff;
}


/*
.deque-expander.form
  [role='button'].deque-button.deque-button-toggle[aria-pressed='true'],*/

.top-bar,
.aside ul {
    margin-bottom: 0;
}

.aside h3.first,
#deque-seller .m-card {
    margin-top: 0;
}

.call-to-action-section.m-card {
    margin-top: 0;
}

.metaCol {
    display: block;
}

.warning {
    text-align: center;
    background-color: #fffdf2;
    padding: 20px;
    border: 1px solid #b8635f;
    margin: 35px 35px 45px 35px;
    font-size: 1.2em;
}

.warning .fas.fa-exclamation-triangle,
.warning .fa.fa-warning {
    color: #a6342e;
    font-size: 1.4em;
}

@media (max-width:1199px) {
    .colLeft,
    .colRight,
    .colLeftWide,
    .colRightNarrow {
        float: none;
        width: 100%;
    }
    .colRightNarrow {
        max-width: 100%;
        width: 100%;
        margin-top: 2rem;
    }
    .colRightNarrow.aside .m-card {
        float: right;
        max-width: 44%;
        margin-right: 30px;
    }
    .colRightNarrow.aside .m-card:first-child {
        float: left;
        margin-right: auto;
    }
    .colRightNarrow .m-dot-group,
    .colRightNarrow .m-card .m-card-background-image {
        display: none;
    }
    .content {
        width: 100%;
        clear: both;
    }
    .aside .newsletter.m-card {
        margin-top: 0;
    }
    .aside .ruleInfo.m-card {
        max-height: 100%;
        overflow-y: auto;
        flex-grow: 1;
    }
    h1 {
        font-size: 2rem;
    }
    .aside,
    .aside .ruleInfo.m-card h2.m-card-body {
        width: 100%;
    }
    .aside .call-to-action-section {
        margin-top: 0;
    }
    .metaCol {
        display: flex;
    }
}

.visually-hidden {
    border: 0;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip:
    rect(1px,
    1px,
    1px,
    1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

@media (max-width:766px) {
    .m-dot-group,
    .m-card .m-card-background-image {
        display: none;
    }
    .colRightNarrow.aside .m-card {
        float: none;
        max-width: 94%;
        margin: 0 0 30px 0;
    }
    .colRightNarrow.aside .m-card:first-child {
        float: none;
    }
    .metaCol {
        display: block;
    }
}

@media (max-width:600px) {
    .colLeft,
    .colRight,
    .colLeftWide,
    .colRightNarrow {
        float: none;
        width: 100%;
    }
    .aside .ruleInfo.m-card .m-card-body {
        width: 100%;
    }
    .rule-info {
        display: block;
    }
    .metaCol {
        display: block;
    }
    .aside .m-card-body.second-card {
        margin-top: -2rem;
    }
    h1 {
        font-size: 1.875rem;
    }
    .relatedPages .logo {
        max-width: 50%;
        float: none;
        height: 100%;
        clear: both;
        text-align: center;
        margin: 0 auto;
    }
    .relatedPages .links {
        max-width: 100%;
        float: none;
        margin-left: 0;
    }
    .relatedPages h3 {
        margin-top: 0.9375rem;
    }
    .m-dot-group {
        display: none;
    }
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    /*margin: 10% auto; */
    margin: 0px;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

.checkmark__circle_no_ani {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.06s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark_no_ani {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 0px;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .04s ease-in-out .04s forwards, scale .03s ease-in-out .09s both;
}

.checkmark__check_no {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.03s cubic-bezier(0.65, 0, 0.45, 1) 0.08s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%,
    100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #7ac142;
    }
}

.icon {
    font-size: 24px;
    margin: 5px;
}

.space-bottom {
    margin-bottom: 10px;
}

#rulesList li, .page-section li {
    margin-bottom: 12px;
}

a:focus {
    outline: -webkit-focus-ring-color auto 2px;
    outline-offset: 2.5px
}


.logo:focus {
    outline: #fff solid 2px !important;
    outline-offset: -4px;
}