/* Base styles */
@font-face {
  font-family: Inconsolata;
  src: url(https://dequeuniversity.com/assets/fonts/Inconsolata.eot?#iefix)
      format(embedded-opentype),
    url(https://dequeuniversity.com/assets/fonts/Inconsolata.woff) format(woff),
    url(https://dequeuniversity.com/assets/fonts/Inconsolata.otf) format(otf),
    url(https://dequeuniversity.com/assets/fonts/Inconsolata.ttf)
      format(truetype),
    url(https://dequeuniversity.com/assets/fonts/Inconsolata.svg) format(svg);
  font-weight: 400;
  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.9375rem;
  color: #1e1e1e;
  font-weight: 400;
}

p {
  margin-bottom: 0.875rem;
}

a {
  text-decoration: underline;
}

ul {
  margin-bottom: 1.4rem;
}

label {
  font-size: 0.9375rem;
  color: #666;
  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;
}
*/
textarea {
  display: inline-block;
  height: auto;
  color: #1e1e1e;
  border: 2px solid #1e1e1e;
  border-radius: 4px;
  box-shadow: none;
  transition: none;
  width: 100%;
  padding: 1rem;
}

.site-header {
  background: #ffffff;
  padding-bottom: 0;
}

.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.9375rem;
}

.container {
  padding: 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;
}

.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;
}

.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, 'Courier New', Courier, monspace;
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: auto;
	line-height:1.8em;
}

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;
}

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;
}