@font-face {
  font-family: 'mwf-glyphs';
  src: url(/https/dequeuniversity.com/assets/js/widgets/_fonts/MWFMDL2.1.63.woff) format('woff'), url(/https/dequeuniversity.com/assets/js/widgets/_fonts/MWFMDL2.1.63.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
.deque-wrapper,
.mwf-wrapper {
  border:2px solid #ccc;
  padding:20px;
  background-color:#fff;
}

.explanation section {
  padding:0 0 0 30px;
  margin-right:20px;
}

#content .explanation section h2 {
  margin-left:-30px;
  padding-left:0;
  border-bottom:1px solid grey;
}

.explanation pre {
  border:1px solid #ccc;
}

.explanation code {
  background-color:#eee;
}

.deque-wrapper [role="alert"] > .deque:not(.dialog).error {
  margin-top:5px !important;
}

#content .example #implementation h3 {
  margin: 26px 4px 12px 0;
  padding-left: 0;
  background: none !important;
  color: #2f2f2f;
  font-weight: normal;
}


#content .example .deque-wrapper .feedback-holder h4 {
  border-radius:0;
  background-color:inherit;
  border:0;
}

.mwf-wrapper .c-drawer > button,
.mwf-wrapper a.c-refine-item, button.c-refine-item {
  box-sizing:border-box;
}

.mwf-wrapper .c-drawer .f-toggle[aria-expanded="true"]::after, 
.mwf-wrapper .c-drawer > button[aria-expanded="true"]::after, 
.mwf-wrapper .c-drawer > header .f-toggle[aria-expanded="true"]::after, 
.mwf-wrapper .c-drawer > header > button[aria-expanded="true"]::after {
    font-family:mwf-glyphs;
  content:"\E70E";
}
.mwf-wrapper .c-drawer .f-toggle[aria-expanded="false"]::after, 
.mwf-wrapper .c-drawer > button[aria-expanded="false"]::after, 
.mwf-wrapper .c-drawer > header .f-toggle[aria-expanded="false"]::after, 
.mwf-wrapper .c-drawer > header > button[aria-expanded="false"]::after {
    font-family:mwf-glyphs;
  content:"\E70D";
}
.mwf-wrapper .c-drawer {
  width:300px;
  margin:auto;
  background-color:#eee;
  outline:1px solid #ccc;
}
.c-drawer li {
  list-style:none;
}
.mwf-wrapper .c-drawer .f-toggle, 
.mwf-wrapper .c-drawer > button, 
.mwf-wrapper .c-drawer > header .f-toggle, 
.mwf-wrapper .c-drawer > header > button {
  border-radius:0;
  color:#fff;
  background-color:#006cc1;
  font-size:1em;
}
.mwf-wrapper .c-drawer .f-toggle:hover,
.mwf-wrapper .c-drawer .f-toggle:focus, 
.mwf-wrapper .c-drawer > button:hover, 
.mwf-wrapper .c-drawer > button:focus, 
.mwf-wrapper .c-drawer > header .f-toggle:hover,
.mwf-wrapper .c-drawer > header .f-toggle:focus,
.mwf-wrapper .c-drawer > header > button:hover,
.mwf-wrapper .c-drawer > header > button:focus {
  background-color:#02589c;
}
.mwf-wrapper a.c-refine-item, 
.mwf-wrapper button.c-refine-item {
  background-color:#fdfdfd;
}
.mwf-wrapper a.c-refine-item:hover, 
.mwf-wrapper a.c-refine-item:focus, 
.mwf-wrapper button.c-refine-item:hover,
.mwf-wrapper button.c-refine-item:focus
{
  background-color:#eee;
}
.mwf-wrapper a.f-selected.c-refine-item, 
.mwf-wrapper a.c-refine-item[aria-checked="true"], 
.mwf-wrapper a.c-refine-item[aria-selected="true"], 
.mwf-wrapper button.f-selected.c-refine-item, 
.mwf-wrapper button.c-refine-item[aria-checked="true"], 
.mwf-wrapper button.c-refine-item[aria-selected="true"] {
  background-color:#eee;
}

.mwf-wrapper .c-label {
  margin:0;
  padding:0;
  font-size:1em;
}

.mwf-wrapper input.c-text-field[type="text"], 
input.c-text-field[type="number"], 
input[type="email"] {
  height:auto;
  margin:0;
}
.mwf-wrapper header {
  height:auto;
  width:auto;
  margin:auto;
  padding:auto;
  color:inherit;
  color:inherit;
  background:inherit;
  box-shadow:inherit;
}
#content .example .mwf-wrapper .c-pivot h3 {
  background-color:inherit;
  border-radius:0;
  border:0;
  padding:0;
  margin:0;
}

.mwf-wrapper [role=tabpanel] {
  margin:0 0 0 10px;
}

.mwf-wrapper [role=tabpanel] {
  border-top:1px solid #ccc;
  padding-top:15px;
}

#content .example .deque-wrapper h3 {
    background-color:inherit;
    border-radius:inherit;
  }