.spacious { margin-top: 48px; }

.cozy { margin-top: 36px; }

.cozy-sm { margin-top: 12px; }

p.cozy + p { margin-top: 4px; }

body p.squish { margin-top: 0; }

body ol.indent { padding-left: 48px; margin-top: 24px; }
body ol.indent li { padding-bottom: 12px; }

h6.indent + p.indent { margin-top: 0; }

.fully-wide { padding: 48px 0; text-align: center; }

.nowrap { white-space: nowrap; }

.list-unstyled, .list-unstyled > li { margin: 0; list-style: none; padding: 0; }

.layout-default .main-container { display: block; height: auto; min-height: 100vh; }

.sidenav .nav-group label, .slider-nav .nav-group label { font-weight: bold; display: block; width: 100%; }
.sidenav .nav-group label > a, .slider-nav .nav-group label > a { color: inherit; text-decoration: none; padding-left: 12px; }
.sidenav .nav-group label > a:hover, .sidenav .nav-group label > a:active, .sidenav .nav-group label > a:focus, .slider-nav .nav-group label > a:hover, .slider-nav .nav-group label > a:active, .slider-nav .nav-group label > a:focus { color: inherit; text-decoration: none; background: #eee; }
.sidenav .nav-group label > a.active, .slider-nav .nav-group label > a.active { background: #D9E4EA; }
.sidenav .nav-group label > a.active:hover, .sidenav .nav-group label > a.active:active, .sidenav .nav-group label > a.active:focus, .slider-nav .nav-group label > a.active:hover, .slider-nav .nav-group label > a.active:active, .slider-nav .nav-group label > a.active:focus { background: #D9E4EA; }
.sidenav a.nav-link > .nav-link-tag, .slider-nav a.nav-link > .nav-link-tag { color: #313131; display: inline-block; padding-left: 8px; font-size: 10px; font-weight: 400; vertical-align: top; letter-spacing: 0.02em; }
.sidenav a.nav-link > .nav-link-tag.new, .slider-nav a.nav-link > .nav-link-tag.new { color: #7e00b4; }
.sidenav a.nav-link > .nav-link-tag.updated, .slider-nav a.nav-link > .nav-link-tag.updated { color: #0094d2; }

.slider-nav .nav-group label > a { display: block; width: auto; margin-left: -12px; margin-right: -12px; border-radius: 3px 0 0 3px; }

.valign { display: table; }
.valign > * { display: table-cell; vertical-align: middle; }

:not(pre) > code[class*="language-"], pre[class*="language-"], pre, code[class*="language-"] { background: transparent; }

@media (max-width: 991px) { .main-container .sidenav { display: none; }
  body.layout-get-started .content-area > section, body.layout-components .content-area > section { width: 100%; padding-left: 0; } }
a.btn-primary { color: #fafafa; }
a.btn-primary:hover, a.btn-primary:active, a.btn-primary:visited, a.btn-primary:focus { color: #fff; }

@media (min-width: 577px) { ul#content_tabs .nav .nav-item { margin-right: 6px; } }
.center-demo-grid-item { align-self: center; text-align: center; }

body:not(.layout-home) .content-area section:first-of-type h1 { margin-top: -6px; }
body:not(.layout-home) .main-container .content-container .content-area { padding-bottom: 72px; }

.sidenav .sidenav-content { margin-bottom: 0; padding-bottom: 24px; }

header .branding .clr-vmw-logo { background-image: url(../images/clarity_logo.svg); margin-right: 11px; }

@media (max-width: 769px) { html { -webkit-overflow-scrolling: touch; }
  body.layout-get-started h2 { line-height: 36px; } }
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) { html { -webkit-overflow-scrolling: touch; } }
body.layout-documentation .main-container .content-container .content-area, body.layout-get-started .main-container .content-container .content-area, body.layout-news .main-container .content-container .content-area { padding-left: 36px; padding-top: 18px; }

body.layout-documentation h2, body.layout-documentation h3, body.layout-get-started h2, body.layout-get-started h3, body.layout-news h2, body.layout-news h3 { margin-top: 96px; }
body.layout-documentation p + h3, body.layout-documentation div + h3, body.layout-get-started p + h3, body.layout-get-started div + h3, body.layout-news p + h3, body.layout-news div + h3 { margin-top: 72px; }
body.layout-documentation h2 + h3, body.layout-get-started h2 + h3, body.layout-news h2 + h3 { margin-top: 36px; }
body.layout-documentation h5, body.layout-get-started h5, body.layout-news h5 { color: #000; margin-top: 36px; }
body.layout-documentation p + h5, body.layout-get-started p + h5, body.layout-news p + h5 { margin-top: 48px; }
body.layout-documentation h3 + h5, body.layout-documentation h2 + h5, body.layout-documentation h3 + h4, body.layout-documentation h1 + h5, body.layout-get-started h3 + h5, body.layout-get-started h2 + h5, body.layout-get-started h3 + h4, body.layout-get-started h1 + h5, body.layout-news h3 + h5, body.layout-news h2 + h5, body.layout-news h3 + h4, body.layout-news h1 + h5 { margin-top: 24px; }
body.layout-documentation h4, body.layout-get-started h4, body.layout-news h4 { margin-top: 72px; }
body.layout-documentation h6 + p, body.layout-get-started h6 + p, body.layout-news h6 + p { margin-top: 6px; }

@media (max-width: 544px) { .clr-example { max-width: 100%; overflow: scroll; }
  .clr-example > .main-container { max-width: 100%; overflow: hidden; } }
/** Syntax highlighting styles */
.highlight { background: #fff; }
.highlight .c { color: #998; font-style: italic; }
.highlight .err { color: #a61717; background-color: #e3d2d2; }
.highlight .k { font-weight: bold; }
.highlight .o { font-weight: bold; }
.highlight .cm { color: #998; font-style: italic; }
.highlight .cp { color: #999; font-weight: bold; }
.highlight .c1 { color: #998; font-style: italic; }
.highlight .cs { color: #999; font-weight: bold; font-style: italic; }
.highlight .gd { color: #000; background-color: #fdd; }
.highlight .gd .x { color: #000; background-color: #faa; }
.highlight .ge { font-style: italic; }
.highlight .gr { color: #a00; }
.highlight .gh { color: #999; }
.highlight .gi { color: #000; background-color: #dfd; }
.highlight .gi .x { color: #000; background-color: #afa; }
.highlight .go { color: #888; }
.highlight .gp { color: #555; }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: #aaa; }
.highlight .gt { color: #a00; }
.highlight .kc { font-weight: bold; }
.highlight .kd { font-weight: bold; }
.highlight .kp { font-weight: bold; }
.highlight .kr { font-weight: bold; }
.highlight .kt { color: #458; font-weight: bold; }
.highlight .m { color: #099; }
.highlight .s { color: #d14; }
.highlight .na { color: #008080; }
.highlight .nb { color: #0086B3; }
.highlight .nc { color: #458; font-weight: bold; }
.highlight .no { color: #008080; }
.highlight .ni { color: #800080; }
.highlight .ne { color: #900; font-weight: bold; }
.highlight .nf { color: #900; font-weight: bold; }
.highlight .nn { color: #555; }
.highlight .nt { color: #000080; }
.highlight .nv { color: #008080; }
.highlight .ow { font-weight: bold; }
.highlight .w { color: #bbb; }
.highlight .mf { color: #099; }
.highlight .mh { color: #099; }
.highlight .mi { color: #099; }
.highlight .mo { color: #099; }
.highlight .sb { color: #d14; }
.highlight .sc { color: #d14; }
.highlight .sd { color: #d14; }
.highlight .s2 { color: #d14; }
.highlight .se { color: #d14; }
.highlight .sh { color: #d14; }
.highlight .si { color: #d14; }
.highlight .sx { color: #d14; }
.highlight .sr { color: #009926; }
.highlight .s1 { color: #d14; }
.highlight .ss { color: #990073; }
.highlight .bp { color: #999; }
.highlight .vc { color: #008080; }
.highlight .vg { color: #008080; }
.highlight .vi { color: #008080; }
.highlight .il { color: #099; }

.main-container > header { background-repeat: no-repeat; background-position: top center; background-size: cover; }
.main-container > header .branding > a { height: 60px; }
.main-container > header a { color: #fafafa; }
.main-container > header a:hover, .main-container > header a:active { color: #fff; text-decoration: none; }
.main-container > header a:visited { color: #fafafa; text-decoration: none; }

header .branding .logo, header .branding .clr-icon, .header .branding .logo, .header .branding .clr-icon { margin-right: 12px; }

.sliding-nav-toggle { display: none; }

.sliding-nav-wrapper, .sliding-sidenav-wrapper { will-change: margin; transition: margin 0.22s ease-out; display: none; margin-left: -100%; height: 100vh; width: 35%; min-width: 240px; padding: 0; padding-right: 48px; position: fixed; top: 0; left: 0; z-index: 1032; overflow: hidden; }
.sliding-nav-wrapper h5, .sliding-sidenav-wrapper h5 { color: #565656; font-size: 14px; padding-left: 24px; margin-top: 48px; }
.sliding-nav-wrapper h5.furst, .sliding-nav-wrapper h5.changelog-hdr, .sliding-sidenav-wrapper h5.furst, .sliding-sidenav-wrapper h5.changelog-hdr { margin-top: 24px; }

.sliding-sidenav-wrapper { width: 50%; min-width: 320px; max-width: 400px; }
.sliding-sidenav-wrapper h5 { font-weight: 600; text-transform: uppercase; }
.sliding-sidenav-wrapper h5.first { margin-top: 20px; }

a.close-toggle { display: block; position: absolute; right: 18px; top: 20px; font-size: 36px; color: #f0f0f0; }
a.close-toggle:hover, a.close-toggle:focus { text-decoration: none; color: #fff; }

.sliding-sidenav-wrapper { margin-left: auto; margin-right: -100%; left: auto; right: 0; padding-left: 48px; padding-right: 0; }
.sliding-sidenav-wrapper a.close-toggle { left: 0; right: auto; }

.sliding-nav-backdrop { will-change: visibility; transition: visibility 0.3s linear; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.74); z-index: 1031; display: none; visibility: hidden; }

.sliding-nav { background: #fafafa; height: 100vh; width: 100%; overflow: hidden; overflow-y: auto; }
.sliding-nav .sliding-nav-logo > .logo-img { background-image: url("../images/clarity_logo.svg"); height: 36px; width: 36px; display: inline-block; margin: 12px 0 0 12px; }
.sliding-nav ul.slider-nav { margin: 0; padding: 0; display: block; border: 0 none; box-shadow: none; color: #fff; list-style-type: none; }
.sliding-nav ul.slider-nav li { margin: 0; padding: 0; }
.sliding-nav ul.slider-nav a.nav-link { will-change: color background-color; transition: all 0.16s linear; color: #565656; font-weight: 200; letter-spacing: 0.04em; display: block; width: 100%; padding: 0 12px; display: block; margin: 18px 0 18px 12px; border-radius: 3px 0 0 3px; }
.sliding-nav ul.slider-nav a.nav-link.nav-link-header { font-weight: 600; }
.sliding-nav ul.slider-nav a.nav-link.nav-link-header:last-child { margin-top: 36px; }
.sliding-nav ul.slider-nav a.nav-link:hover { color: #000; text-decoration: none; background-color: #eee; }
.sliding-nav ul.slider-nav a.nav-link.active { background: #D9E4EA; }
.sliding-nav ul.slider-nav a.nav-link.active:hover, .sliding-nav ul.slider-nav a.nav-link.active:active, .sliding-nav ul.slider-nav a.nav-link.active:focus { background: #D9E4EA; }
.sliding-nav ul.slider-nav a.nav-link > .nav-link-tag { vertical-align: middle; }

body.show-leftnav .sliding-nav-wrapper { margin-left: 0; }
body.show-leftnav .sliding-nav-backdrop { display: block; visibility: visible; }

body.show-sidebar .sliding-nav-wrapper { margin-left: -100%; }
body.show-sidebar .sliding-sidenav-wrapper { margin-right: 0; }
body.show-sidebar .sliding-nav-backdrop { display: block; visibility: visible; }

header .branding > a.sliding-nav-toggle { font-size: 24px; display: none; }

.github-btn { margin-top: 20px; }

@media (max-width: 1116px) { .main-container > header .branding, .main-container > .header .branding { width: auto; max-width: none; min-width: 0; padding-right: 24px; } }
@media (min-width: 992px) { .sliding-nav-backdrop { display: none !important; visibility: hidden !important; } }
@media (max-width: 991px) { .sliding-nav-wrapper { display: block; }
  .github-btn { display: none; }
  .layout-home > .main-container > header .branding .clr-vmw-logo, .layout-documentation > .main-container > header .branding .clr-vmw-logo, .layout-get-started > .main-container > header .branding .clr-vmw-logo, .layout-community > .main-container > header .branding .clr-vmw-logo, .layout-news > .main-container > header .branding .clr-vmw-logo { visibility: hidden; margin-right: 6px; }
  .layout-home > .main-container > header .branding > a.sliding-nav-toggle, .layout-documentation > .main-container > header .branding > a.sliding-nav-toggle, .layout-get-started > .main-container > header .branding > a.sliding-nav-toggle, .layout-community > .main-container > header .branding > a.sliding-nav-toggle, .layout-news > .main-container > header .branding > a.sliding-nav-toggle { display: block; height: 60px; width: 36px; background: url(../images/home/menu.svg) 50% 50% no-repeat; position: absolute; top: -1px; left: 18px; }
  .layout-home > .main-container > header .settings > a.sliding-sidenav-toggle, .layout-documentation > .main-container > header .settings > a.sliding-sidenav-toggle, .layout-get-started > .main-container > header .settings > a.sliding-sidenav-toggle, .layout-community > .main-container > header .settings > a.sliding-sidenav-toggle, .layout-news > .main-container > header .settings > a.sliding-sidenav-toggle { display: block; width: 36px; background: url(../images/home/slider.svg) 50% 50% no-repeat; position: absolute; top: 18px; right: 8px; height: 24px; }
  .layout-home > .main-container > header div.header-nav, .layout-home > .main-container > header .divider, .layout-home > .main-container > header .header-nav, .layout-documentation > .main-container > header div.header-nav, .layout-documentation > .main-container > header .divider, .layout-documentation > .main-container > header .header-nav, .layout-get-started > .main-container > header div.header-nav, .layout-get-started > .main-container > header .divider, .layout-get-started > .main-container > header .header-nav, .layout-community > .main-container > header div.header-nav, .layout-community > .main-container > header .divider, .layout-community > .main-container > header .header-nav, .layout-news > .main-container > header div.header-nav, .layout-news > .main-container > header .divider, .layout-news > .main-container > header .header-nav { display: none !important; }
  .layout-home > .main-container > header, .layout-home > .main-container > .header, .layout-documentation > .main-container > header, .layout-documentation > .main-container > .header, .layout-get-started > .main-container > header, .layout-get-started > .main-container > .header, .layout-community > .main-container > header, .layout-community > .main-container > .header, .layout-news > .main-container > header, .layout-news > .main-container > .header { padding: 0 24px; }
  .layout-home > .main-container > header .branding, .layout-home > .main-container > .header .branding, .layout-documentation > .main-container > header .branding, .layout-documentation > .main-container > .header .branding, .layout-get-started > .main-container > header .branding, .layout-get-started > .main-container > .header .branding, .layout-community > .main-container > header .branding, .layout-community > .main-container > .header .branding, .layout-news > .main-container > header .branding, .layout-news > .main-container > .header .branding { padding-left: 0; } }
footer { padding: 24px 0; }
footer .vmware-weblogo { margin: 12px 0; }
footer .copyright { margin-top: 6px; }

body:not(.layout-home) footer { display: none; }

body.layout-home { background-color: #fafafa; }
body.layout-home .main-container { height: auto; }
body.layout-home .main-container .content-area { padding: 0; }
body.layout-home section { padding-top: 96px; padding-bottom: 96px; }
body.layout-home section.home-hero { padding-top: 60px; padding-bottom: 72px; }
body.layout-home section.home-cards, body.layout-home section.home-process { padding-top: 0; }
body.layout-home section.home-contact { padding: 0; }
body.layout-home .phone-github-btn { display: none; text-align: left; padding-left: 4px; padding-top: 12px; }

.home-hero { height: 696px; max-width: 1248px; width: 100%; margin: 0 auto; position: relative; }
.home-hero .home-hero-content { width: 100%; max-width: 648px; }
.home-hero h1 { font-weight: 200; letter-spacing: -0.02em; line-height: 72px; font-size: 64px; margin-bottom: 12px; margin-top: 12px; }
.home-hero p.head { font-size: 18px; font-weight: 200; line-height: 36px; margin: 6px 5px; color: #000; max-width: 624px; }
.home-hero .home-hero-btn { margin: 36px 0 24px; padding-left: 5px; }
.home-hero .btn { width: 168px; height: 48px; line-height: 47px; margin: 0; margin-right: 18px; font-weight: 400; }
.home-hero .btn-secondary { margin-right: 0; }
.home-hero p.subtext { margin-left: 5px; }
.home-hero p.subtext > a { color: inherit; text-decoration: underline; }
.home-hero p.subtext > a:hover, .home-hero p.subtext > a:active, .home-hero p.subtext > a:focus { color: #313131; text-decoration: underline; }
.home-hero .bg-img { height: 520px; width: 693px; position: absolute; bottom: 0; left: 612px; background-image: url("../images/clarity_logo.svg"); background-size: cover; background-position: center center; }

.home-cards { width: 100%; max-width: 1248px; margin: 0 auto; z-index: 1; position: relative; }
.home-cards .home-cards-container { background-color: #fff; width: 100%; padding: 48px 0 24px; border-radius: 3px; margin-top: -168px; border: 1px solid #eee; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12); }
.home-cards .home-cards-container > h1 { margin: 0; margin-bottom: 48px; text-align: center; }
.home-cards .home-card-wrapper { width: 100%; margin: 0; }
.home-cards .home-card { padding: 24px 24px 0 48px; text-align: left; }
.home-cards .home-card-angular { padding-right: 36px; padding-left: 24px; }
.home-cards .home-card-title { line-height: 48px; vertical-align: middle; margin: 12px 0 4px; font-weight: 200; text-align: center; }
.home-cards .home-card-bug { text-align: center; }
.home-cards p { margin: 0 auto; font-size: 16px; line-height: 28px; width: 100%; max-width: 240px; }

.home-process { width: 100%; padding: 0; max-width: 962px; margin: 0 auto; }
.home-process h1 { margin: 0; margin-top: 24px; margin-bottom: 72px; text-align: center; }
.home-process > .row { margin: 0; }
.home-process .home-process-block__title { position: relative; }
.home-process .home-process-block__title > .img { height: 36px; width: 36px; position: absolute; left: 6px; top: 6px; background-position: center center; background-size: contain; background-repeat: no-repeat; }
.home-process .home-process-block__title > .img.bulb { background-image: url("../images/home/ic-bulb.svg"); }
.home-process .home-process-block__title > .img.evolving { background-image: url("../images/home/ic_evolving.svg"); }
.home-process .home-process-block__title > .img.rapid { background-image: url("../images/home/ic_rapid.svg"); }
.home-process .home-process-block__title > .img.reliable { background-image: url("../images/home/ic_reliable.svg"); }
.home-process .home-process-block__title > h3 { padding-left: 54px; line-height: 48px; }

.home-process-block { padding-left: 0; padding-right: 0; }
.home-process-block p { width: 100%; max-width: 408px; margin-top: 0; margin-bottom: 48px; font-size: 16px; }
.home-process-block:nth-child(2n+0) { padding-left: 36px; }

.home-contact { width: 100%; background-color: #313131; background: -moz-linear-gradient(left, #0094D2 0%, #eaf700 50%, #313131 50%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #0094D2), color-stop(50%, #0094D2), color-stop(50%, #313131)); background: -webkit-linear-gradient(left, #0094D2 0%, #0094D2 50%, #313131 50%); background: -o-linear-gradient(left, #0094D2 0%, #0094D2 50%, #313131 50%); background: -ms-linear-gradient(left, #0094D2 0%, #0094D2 50%, #313131 50%); background: linear-gradient(to right, #0094D2 0%, #0094D2 50%, #313131 50%); }

.home-contact-container, .layout-home footer { max-width: 1248px; width: 100%; margin: 0 auto; }

.home-contact-block { padding: 0; }
.home-contact-block:nth-child(2n+0) { padding-left: 36px; }
.home-contact-block:nth-child(2n+0) a.home-contact_link { padding-left: 78px; }
.home-contact-block:nth-child(2n+0) .img { width: 72px; }

a.home-contact_link { display: block; line-height: 72px; margin-top: 96px; margin-bottom: 24px; position: relative; padding-left: 54px; color: #fff; }
a.home-contact_link > .img { display: block; height: 72px; width: 48px; position: absolute; top: 0; left: 0; }
a.home-contact_link.mit-link > .img { background-image: url("../images/home/MIT.png"); background-position: center center; background-repeat: no-repeat; }
a.home-contact_link.twr-link > .img { background-image: url("../images/home/twitter.svg"); background-position: center center; background-repeat: no-repeat; }

@media (max-width: 1364px) { .home-hero { width: 100%; overflow-x: hidden; } }
@media (max-width: 1291px) { body.layout-home section, body.layout-home section.home-contact { padding-left: 18px; padding-right: 18px; }
  body.layout-home section.home-cards { padding-left: 24px; padding-right: 24px; }
  body.layout-home section.home-process { padding-left: 12px; padding-right: 12px; }
  body.layout-home footer { padding-left: 24px; } }
@media (max-width: 1092px) { .home-hero .bg-img { left: 504px; } }
@media (max-width: 991px) { body.layout-home section.home-hero { padding-top: 24px; padding-bottom: 72px; height: 660px; } }
@media (max-width: 907px) { body.layout-home section.home-process { padding-left: 42px; padding-right: 42px; }
  .home-cards .home-cards-container > h1 { font-size: 28px; line-height: 36px; margin-bottom: 24px; }
  .home-cards .home-card { padding: 24px 12px 0 24px; }
  .home-cards .home-card-angular { padding-right: 12px; padding-left: 12px; } }
@media (max-width: 768px) { body.layout-home section.home-hero { padding-top: 24px; height: 492px; padding-bottom: 24px; }
  body.layout-home section.home-cards { padding-bottom: 24px; }
  body.layout-home section.home-process { padding-left: 24px; padding-right: 24px; }
  body.layout-home section.home-contact { background: none; padding-left: 0; padding-right: 0; }
  .home-hero h1 { margin-top: 0; font-size: 48px; }
  .home-hero .home-hero-btn { margin-top: 18px; width: 336px; }
  .home-hero .btn { display: block; margin: 24px auto; }
  .home-hero .bg-img { height: 344px; width: 455px; left: 372px; }
  .home-hero p.subtext { margin-top: 36px; font-size: 16px; }
  .home-cards .home-cards-container { margin-top: -48px; }
  .home-cards .home-cards-container > h1 { margin-bottom: 36px; padding-left: 24px; padding-right: 24px; }
  .home-cards .home-card { position: relative; padding: 24px 60px 24px 180px; width: 100%; max-width: 100%; text-align: left; }
  .home-cards .home-card-bug { position: absolute; width: 132px; top: 50%; left: 36px; margin-top: -32px; }
  .home-cards .home-card-wrapper { display: block; }
  .home-cards .home-card-title { line-height: 24px; margin: 0; text-align: left; }
  .home-cards p { margin: 0; font-size: 16px; max-width: 100%; margin-top: 16px; }
  .home-process h1 { font-size: 28px; margin-bottom: 0; }
  .home-process > .row { display: block; }
  .home-process-block { width: 100%; max-width: 100%; }
  .home-process-block:nth-child(2n+0) { padding-left: 0; }
  .home-process-block p { width: 100%; max-width: 100%; margin-top: 12px; margin-bottom: 0; padding: 0 12px; }
  .home-contact > .row { height: 240px; flex-direction: column-reverse; -ms-flex-direction: column; }
  .home-contact-block { background-color: #0094D2; width: 100%; max-width: 100%; padding-left: 36px; }
  .home-contact-block + .home-contact-block { background-color: #313131; }
  a.home-contact_link { margin-top: 24px; } }
@media (max-width: 545px) { .home-hero h1 { font-size: 36px; }
  .home-hero p.head { line-height: 24px; max-width: 460px; }
  .home-hero .home-hero-btn { width: 228px; }
  .home-hero .bg-img { height: 295px; width: 390px; left: 55%; bottom: 24px; }
  .home-cards .home-cards-container { padding-top: 36px; margin-top: -48px; }
  .home-cards .home-card { padding-left: 156px; padding-right: 18px; }
  .home-cards .home-card-bug { left: 12px; }
  .home-cards p { line-height: 24px; }
  .home-contact-block { padding-left: 12px !important; } }
@media (max-width: 420px) { body.layout-home section.home-cards { padding-bottom: 24px; padding-left: 0; padding-right: 0; border: 0 none; border-radius: 0; box-shadow: none; }
  body.layout-home section.home-hero { height: auto; }
  body.layout-home section.home-process { padding-bottom: 24px; padding-left: 12px; padding-right: 12px; }
  .home-hero h1 { font-size: 32px; line-height: 36px; text-align: center; margin-bottom: 14px; }
  .home-hero p.head { line-height: 24px; max-width: 266px; font-size: 16px; margin: 0 auto; text-align: center; }
  .home-hero p.subtext { margin-top: 24px; font-size: 16px; margin-left: 0; text-align: center; }
  .home-hero .bg-img { display: none; }
  .home-hero .home-hero-btn { width: 100%; padding-left: 0; }
  .home-hero .btn { min-width: 168px; width: 80%; max-width: 220px; }
  .home-cards .home-cards-container { padding-top: 24px; margin-top: 0; }
  .home-cards .home-card-bug { position: static; margin: 0 auto 18px; }
  .home-cards .home-card { padding-left: 24px; padding-right: 24px; }
  .home-cards .home-card-title { text-align: center; }
  .home-cards p { width: 80%; max-width: 260px; margin: 18px auto 0; }
  .home-process-block p { font-size: 14px; margin-top: 6px; }
  a.mit-link { line-height: 18px; padding-top: 18px; padding-bottom: 12px; } }
@media (min-width: 767px) and (max-width: 930px) { .home-contact-block .xtra { display: none; } }
@media (max-width: 991px) { body.layout-home .phone-github-btn { display: block; } }
@media (max-width: 586px) { body.layout-home .home-cards .home-cards-container { margin-top: 0; } }
@media (max-width: 420px) { body.layout-home .phone-github-btn { text-align: center; padding-left: 0; } }
.layout-get-started .content-area > * { max-width: 900px; }
.layout-get-started .home-cards .home-cards-container { margin-top: 0; margin-right: 0; background: none; box-shadow: none; border: 0 none; padding: 0; }
.layout-get-started .home-cards { padding-left: 12px; padding-right: 0; margin: 0; }
.layout-get-started .home-cards .home-card-wrapper { width: 100%; min-width: 0; padding-left: 0; float: none; text-align: left; display: table; padding: 24px; background: white; border: 1px solid #eee; border-radius: 3px; margin-top: 24px; height: auto; min-height: 144px; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12); }
.layout-get-started .home-cards .home-card { background: none; width: 100%; text-align: left; height: auto; display: table-row; min-height: 96px; border: 0 none; box-shadow: none; }
.layout-get-started .home-cards .home-card-bug { text-align: right; width: 48px; min-height: 96px; display: table-cell; vertical-align: middle; }
.layout-get-started .home-cards .home-card-title { font-size: rem(1.75); width: 192px; min-height: 96px; text-align: left; padding-left: 16.0008px; display: table-cell; vertical-align: middle; }
.layout-get-started .home-cards .home-card-text { font-size: rem(0.875); line-height: 24px; min-height: 96px; display: table-cell; vertical-align: middle; }
.layout-get-started hr { margin: 48px 0 24px; width: 100%; max-width: 900px; color: #ddd; border: 0 none; border-bottom: 1.00001px solid #ddd; }
.layout-get-started ol { padding-left: 18px; }
.layout-get-started .sidenav .nav-group .nav-list { margin-left: 12px; }

@media (max-width: 716px) { .layout-get-started .home-cards { padding-left: 0; }
  .layout-get-started hr { visibility: hidden; } }
@media (max-width: 576px) { .layout-get-started .home-cards .home-card-wrapper { display: block; }
  .layout-get-started .home-cards .home-card { width: 100%; text-align: center; display: block; }
  .layout-get-started .home-cards .home-card-bug, .layout-get-started .home-cards .home-card-title, .layout-get-started .home-cards .home-card-text { display: block; text-align: center; min-height: 48px; width: 100%; }
  .layout-get-started .home-cards .home-card-title { padding-left: 0; }
  .layout-get-started .home-cards .home-card-text { text-align: left; }
  .layout-get-started .home-cards .valign { display: block; }
  .layout-get-started .home-cards .valign > * { display: block; }
  .layout-get-started ol { padding-left: 0; } }
.layout-news .content-area > section { max-width: 900px; }
.layout-news .content-area > section:first-child { margin-top: 0; padding-top: 0; }
.layout-news .content-area > section h2:first-of-type { margin-top: 24px; }
.layout-news ul.list { margin-top: 4px; margin-left: 1.3em; }

ul.whats-new-highlights { margin-top: 12px; }
ul.whats-new-highlights h6 + p { margin-top: 0; }
ul.whats-new-highlights > li { margin-top: 24px; }
ul.whats-new-highlights > li:first-child { margin-top: 0; }
ul.whats-new-highlights > li:first-child > h6 { margin-top: 0; }
ul.whats-new-highlights > li > h6 { font-weight: normal; font-size: 18px; margin-top: 48px; color: #000; margin-bottom: 4px; }

.page-whats-new h2 { margin-top: 36px; }
.page-whats-new h4 { margin-top: 24px; }
.page-whats-new h2 + h4 { margin-top: 6px; }

.whats-new-summary .summary-block-title, .whats-new-summary .whats-new-mediablock .description > .title { margin-top: 0; font-size: 12px; line-height: normal; font-weight: 600; }

.whats-new-summary .summary-block-details, .whats-new-summary .whats-new-mediablock .description > p.title + p { margin-top: 0; font-size: 18px; line-height: 1.2em; }

.whats-new-summary { margin-right: 0; margin-top: 12px; padding-bottom: 6px; padding-top: 12px; position: static; }
.whats-new-summary .summary-blocks::before, .whats-new-summary .summary-blocks::after { display: table; clear: both; content: ""; }
.whats-new-summary .summary-block { float: left; margin-right: 18px; }
.whats-new-summary .summary-block-details > .count { font-weight: 600; }
.whats-new-summary .whats-new-mediablock { width: 192px; margin-bottom: 0; display: inline-flex; }
.whats-new-summary .whats-new-mediablock .icon { height: 48px; width: 48px; }
.whats-new-summary .whats-new-mediablock .description { margin-top: 0; }
.whats-new-summary .whats-new-mediablock .description > p.title + p { font-size: 13.99992px; width: 120px; }

.breaking-change-alert { margin-top: 12px; }

.layout-news hr { color: #ddd; border: 0 none; border-bottom: 1px solid #ddd; }

@media (max-width: 675px) { .whats-new-summary .whats-new-mediablock { width: 100%; margin-bottom: 0; margin: 0 -6px; padding: 6px 0; -ms-flex-direction: row-reverse; flex-direction: row-reverse; justify-content: space-between; }
  .whats-new-summary .whats-new-mediablock .description { margin-left: 0; width: 100%; }
  .whats-new-summary .whats-new-mediablock .description > p.title + p { width: auto; padding-right: 12px; }
  .whats-new-summary .summary-block { float: none; padding: 6px 0; margin: 0 -6px; } }
@media screen and (min-width: 0\0) and (max-width: 675px) { .whats-new-summary .whats-new-mediablock .icon { display: none !important; } }
.component-workstream-bugs { position: absolute; top: 24px; right: 0; width: 86px; }
.component-workstream-bugs .bug.hidden { visibility: hidden; }
.component-workstream-bugs .bug > img { height: 25px; }
.component-workstream-bugs .bug-ng > img { height: 26px; }

.component-summary { font-size: 16px; font-weight: 200; }
.component-summary:not(.no-margin) { margin-bottom: 15px; margin-top: 8px; }
.component-summary + p { margin-top: 22px; }

.layout-documentation .content-area > section { max-width: 900px; }
.layout-documentation img { max-width: 900px; }
.layout-documentation img.img-fluid { max-width: 100%; }
.layout-documentation .code-card { padding-left: 0; padding-bottom: 0; overflow-x: auto; }
.layout-documentation .table-component-list { max-width: 900px; }
.layout-documentation .table-component-list th { border-top: 0 none; }
.layout-documentation .table-component-list th, .layout-documentation .table-component-list td { text-align: center; vertical-align: middle; }
.layout-documentation .table-component-list th:first-child, .layout-documentation .table-component-list th:last-child, .layout-documentation .table-component-list td:first-child, .layout-documentation .table-component-list td:last-child { text-align: left; }
.layout-documentation .component-legend-item { font-size: 13px; width: 120px; display: inline-block; }
.layout-documentation .component-legend-item span { display: inline-block; }
.layout-documentation .component-legend-item .symbol { width: 18px; }
.layout-documentation .component-legend-item .symbol > img { margin-top: -3px; }
.layout-documentation .component-legend-item:first-child img { margin-top: -1px; }
.layout-documentation .component-legend-item:last-child img { margin-top: 0; }

.page-typography clr-typography-demo div.indent > h4 { font-size: 28px; line-height: 48px; font-weight: 200; margin-left: -48px; margin-bottom: 12px; }
.page-typography clr-typography-demo div.indent div.code-card { padding-left: 48px; padding-top: 0; padding-bottom: 36px; }

.components-spinner { position: relative; left: 50%; margin-top: 15%; margin-left: -23px; }

.page-stack-view h3 + .alert { margin-top: 16px; }

table.buttons-cmp-table td { vertical-align: middle; text-align: left; }

.buttons-modal-gfx { margin-top: 24px; }

.buttons-modal-gfx p { margin-top: 6px; margin-bottom: 18px; }

.main-container .header > .header-nav > .nav-link:last-child::after { content: none; }

body.layout-documentation .main-container .content-container .dox-content-panel { padding: 0; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
body.layout-documentation .dox-header { padding-top: 18px; -ms-flex: 0 0 108px; flex: 0 0 108px; padding-left: 36px; position: relative; }
body.layout-documentation .dox-content-panel .dox-content { -ms-flex: 1 1 auto; flex: 1 1 auto; overflow-y: scroll; width: 100%; max-width: 100%; border-top: 1px solid transparent; }
body.layout-documentation .dox-content-panel .dox-content .dox-content-wrapper { padding-left: 36px; padding-top: 6px; padding-bottom: 96px; max-width: 900px; width: 100%; }
body.layout-documentation .dox-tabs { padding-top: 12px; }
body.layout-documentation .dox-tabs ul { margin-top: 0; margin-bottom: 6px; }
body.layout-documentation .dox-tabs li { display: inline-block; border-right: 1px solid #ccc; }
body.layout-documentation .dox-tabs li:last-child { border-right: 0 none; }
body.layout-documentation .dox-tabs li:first-child a { padding-left: 0; }
body.layout-documentation .dox-tabs a { display: inline-block; padding-right: 18px; padding-top: 2px; padding-bottom: 2px; padding-left: 13px; }
body.layout-documentation .dox-tabs a.active { color: #000; }
body.layout-documentation .dox-tabs a.active:hover { color: #000; }
body.layout-documentation .component-summary + h3 { margin-top: 48px; }
body.layout-documentation .clrweb-button-demo h4, body.layout-documentation .clrweb-stackview-demo h4 { font-size: 16px; margin-top: 28px; margin-bottom: 6px; }
body.layout-documentation .clrweb-datagrid-first-demo h2 { margin-top: 0; }
body.layout-documentation .clrweb-progress-demo h4:not(.card-title) { margin-top: 36px; font-size: 16px; }
body.layout-documentation .clrweb-wizardsteps-block h4:first-child { margin-top: 24px; }
body.layout-documentation clr-typography-links h4 { margin-top: 18px; }

.clrweb-tablink-scrolled.layout-documentation .dox-content { border-top-color: #ccc !important; }

@media (max-width: 768px) { .layout-documentation .clrweb-wizardsteps-block h4:first-child { margin-top: 24px; } }
@media (max-width: 767px) { .component-workstream-bugs { display: none; } }
@media (max-width: 991px) { .layout-documentation .component-legend-item { width: 108px; } }
@media (max-width: 654px) { .hide-responsive { display: none; } }
@media (max-width: 612px) { .layout-documentation img { max-width: 100%; } }
@media (max-width: 544px) { body.layout-documentation h2 { line-height: 36px; }
  body.layout-documentation h4 + p { margin-top: 6px; }
  body.layout-documentation .component-legend-item { width: 150px; }
  body.layout-documentation .clr-icon-selection { padding-top: 6px; padding-left: 0; padding-right: 0; }
  body.layout-documentation .tooltip-demo .clr-example.example-center { min-height: 240px; }
  body.layout-documentation .modal.static { padding: 0; }
  body.layout-documentation clr-datagrid clr-dg-column:nth-child(3), body.layout-documentation clr-datagrid clr-dg-cell:nth-child(3) { display: none; }
  body.layout-documentation clr-datagrid-filtering-demo clr-dg-column:first-child, body.layout-documentation clr-datagrid-filtering-demo clr-dg-cell:first-child, body.layout-documentation clr-datagrid-binding-properties-demo clr-dg-column:first-child, body.layout-documentation clr-datagrid-binding-properties-demo clr-dg-cell:first-child, body.layout-documentation clr-datagrid-string-filtering-demo clr-dg-column:first-child, body.layout-documentation clr-datagrid-string-filtering-demo clr-dg-cell:first-child, body.layout-documentation clr-datagrid-server-driven-demo clr-dg-column:first-child, body.layout-documentation clr-datagrid-server-driven-demo clr-dg-cell:first-child, body.layout-documentation clr-datagrid-sorting-demo clr-dg-column:first-child, body.layout-documentation clr-datagrid-sorting-demo clr-dg-cell:first-child { display: none; }
  body.layout-documentation clr-datagrid-pagination-demo table { max-width: 100%; display: block; overflow: scroll; }
  body.layout-documentation clr-datagrid-pagination-demo th, body.layout-documentation clr-datagrid-pagination-demo td { padding: 3px 3px 4px; text-align: left; }
  body.layout-documentation clr-datagrid-selection-demo clr-dg-column:nth-child(3), body.layout-documentation clr-datagrid-selection-demo clr-dg-cell:nth-child(3), body.layout-documentation clr-datagrid-full-demo clr-dg-column:nth-child(3), body.layout-documentation clr-datagrid-full-demo clr-dg-cell:nth-child(3) { display: table-cell; }
  body.layout-documentation clr-datagrid-selection-demo clr-dg-column:nth-child(2), body.layout-documentation clr-datagrid-selection-demo clr-dg-column:nth-child(4), body.layout-documentation clr-datagrid-selection-demo clr-dg-cell:nth-child(2), body.layout-documentation clr-datagrid-selection-demo clr-dg-cell:nth-child(4), body.layout-documentation clr-datagrid-full-demo clr-dg-column:nth-child(2), body.layout-documentation clr-datagrid-full-demo clr-dg-column:nth-child(4), body.layout-documentation clr-datagrid-full-demo clr-dg-cell:nth-child(2), body.layout-documentation clr-datagrid-full-demo clr-dg-cell:nth-child(4) { display: none; }
  body.layout-documentation clr-dropdown-static-icon-toggle-demo .clr-example.squeeze { padding: 0; text-align: left; }
  body.layout-documentation clr-typography-text td:last-child, body.layout-documentation clr-typography-text td:nth-child(3), body.layout-documentation clr-typography-text th:last-child, body.layout-documentation clr-typography-text th:nth-child(3), body.layout-documentation clr-typography-headers td:last-child, body.layout-documentation clr-typography-headers td:nth-child(3), body.layout-documentation clr-typography-headers th:last-child, body.layout-documentation clr-typography-headers th:nth-child(3) { display: none; } }
@media (max-width: 415px) { .layout-documentation h1 { font-size: 28px; line-height: 36px; }
  .layout-documentation h1 + p { margin-top: 12px; } }
@media (max-width: 329px) { body.layout-documentation .dox-tabs { padding-top: 0; }
  body.layout-documentation .dox-tabs li { border-right: 0 none; display: block; }
  body.layout-documentation .dox-tabs a { padding-left: 0; padding-right: 0; }
  body.layout-documentation .dox-content-panel .dox-content .dox-content-wrapper { padding-top: 0; } }
@media (max-width: 991px) { body.layout-get-started .main-container .content-container .content-area, body.layout-news .main-container .content-container .content-area, body.layout-documentation .dox-header, body.layout-documentation .dox-content-panel .dox-content .dox-content-wrapper { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 1136px) { .component-workstream-bugs { right: 24px; } }
.category-documentation-color .card.card-block { padding-left: 0; padding-right: 0; }
.category-documentation-color .card .card-title { padding-left: 16px; }
.category-documentation-color .colordemo-contrast, .category-documentation-color .colordemo-luminance { padding: 0 !important; }
.category-documentation-color .colordemo-contrast h4, .category-documentation-color .colordemo-luminance h4 { margin-top: 0; }

.layout-community { overflow-y: hidden; }
.layout-community .main-container { overflow-y: hidden; }
.layout-community section { width: 100%; padding-left: 24px; padding-right: 24px; max-width: 1056px; margin: 0 auto; padding-top: 24px; }
.layout-community section h3 { margin-bottom: 24px; }
.layout-community section.community-top-section { padding-top: 0; }
.layout-community .social-card { color: #565656; text-align: center; }
.layout-community .social-card:hover, .layout-community .social-card:focus, .layout-community .social-card:active { text-decoration: none; }
.layout-community .social-card > .card { width: 252px; margin: 0 auto; height: 192px; padding: 0 24px; }
.layout-community .social-card .card-text { font-size: rem(1); }
.layout-community .community-social-icon { margin-bottom: 33px; margin-top: 8px; }
.layout-community .community-social-icon > img { height: 64px; }
.layout-community .social-card-socialcast .community-social-icon { padding-top: 1.3px; }
.layout-community .community-team-cards .row { margin-left: -24px; margin-right: -24px; }
.layout-community .community-team-cards .card { margin: 0; background: none; border: 0 none; box-shadow: none; text-align: center; padding: 0 24px; }
.layout-community .community-team-cards .card .card-text { margin: 0 0 12px; }
.layout-community .community-team-name { margin-top: 12px; }
.layout-community .community-team-role { margin-top: 0; font-size: 14px; }
.layout-community .community-team-blurb { margin-top: 12px; text-align: left; }

@media (max-width: 544px) { .layout-community section { padding-left: 0; padding-right: 0; } }
.nav-item.disabled { display: none; }

.tab-panel { display: none; }

.tab-panel.active { display: block; }

body.layout-error-page { background-color: #eaecf0; background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100vh; text-align: center; width: 100vw; }
body.layout-error-page .main-container { background: none; }
body.layout-error-page img { box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12); margin: 0 auto; margin-top: 5%; }
body.layout-error-page table.fancy-error { width: 95%; max-width: 708px; margin: 5% auto 0; }
body.layout-error-page table.fancy-error tr.error-info > td { padding: 48px; height: 288px; width: 50%; vertical-align: middle; background: #fff; }
body.layout-error-page table.fancy-error tr.error-info > td > p { width: 280px; margin: 0 auto; text-align: justify; }
body.layout-error-page table.fancy-error tr.error-info > td.l { background: #f3f5f8; }
body.layout-error-page table.fancy-error tr.error-info > td.l > p { font-size: 64px; line-height: 1em; text-transform: lowercase; text-align: center; }
body.layout-error-page table.fancy-error tr.error-info > td.r > p { text-align: left; font-size: 14px; }
body.layout-error-page table.fancy-error .btn-block { border-radius: 0; height: 36px; margin: 0; }