.acx-annotation{padding:2em 0}
.acx-annotation:before,.acx-annotation:after{content:" ";display:table}
.acx-annotation:after{clear:both}
.acx-annotation h1{font-size:18px !important;color:#222 !important;font-weight:400 !important}
.acx-annotation ol{counter-reset:li;list-style:none}
.acx-annotation ol h1{font-size:12px !important;font-family:Arial;margin-bottom:0;text-transform:none !important;font-weight:bold}
.acx-annotation ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:1em;margin-top:-1em;background:#ea862d;height:1.5em;width:1.5em;line-height:1.5em;text-align:center;padding-left:0;color:#fff}
.acx-annotation ol li{padding-left:0;margin-right:30px}
.acx-annotation ol span{font-weight:bold}
.acx-annotation ol span:before{content:"";height:0;display:table}
.acx-color-sample:before{content:"";height:5em;width:5em;display:block;background:transparent;border:1px #eee solid;padding:1px}
.acx-color-sample .color-name,.acx-color-sample .color-code{margin:0}
.acx-color-sample.primary:before{background:#8098ac}
.acx-color-sample.secondary:before{background:#8399ad}
.acx-color-sample.teritiary-1:before{background:#bbc7d1}
.acx-color-sample.teritiary-2:before{background:#a8b8c6}
.acx-icons-list{margin-top:70px}
.acx-icons-list li{float:left;width:10%;height:70px;margin:5px;margin-bottom:15px;font-size:13px;line-height:1.4;text-align:center}
.acx-icons-list .icon-class{display:block;text-align:center;word-wrap:break-word;padding: 5px;}
.acx-icons-list .icon{margin-top:5px;margin-bottom:10px;font-size:24px}
.acx-icons-list .icon-component{color:#a9a9a9}
.acx-icons-list.acx-rust .icon{color:rgba(184,95,27,0.75)}
.acx-icons-list.acx-rust .hover-demo{color:#b85f1b !important}
.acx-icons-list.acx-rust .disabled-demo{color:rgba(184,95,27,0.3) !important}

#wrap.acx-wrap .navbar .container{margin:0;padding:0 40px}
#wrap.acx-wrap .acx-main-container{width:100%;padding:0 40px}
#wrap.acx-wrap .navbar-brand{margin-right:40px;text-transform:uppercase;color:#0297d3;font-size:12px;font-weight:800;letter-spacing:2px}
#wrap.acx-wrap .navbar-brand img{vertical-align:top;margin-right:5px}
#wrap.acx-wrap .acx-navbar-container .nav a{color:#0297d3;font-weight:300}
#wrap.acx-wrap .jumbotron{padding-bottom:10px;background:#0297d3}
#wrap.acx-wrap .jumbotron .container{margin:0;padding:0 10px}
#wrap.acx-wrap .jumbotron h1{font-size:48px;font-weight:100;color:#fff}
#wrap.acx-wrap .jumbotron p{font-weight:100;color:rgba(255,255,255,0.75)}
#wrap.acx-wrap h1,#wrap.acx-wrap h2,#wrap.acx-wrap h3,#wrap.acx-wrap h4{text-transform:lowercase;font-weight:200;color:#0297d3}
#wrap.acx-wrap h1{font-size:48px}
#wrap.acx-wrap .acx-docs-section h1,#wrap.acx-wrap .acx-docs-section h2,#wrap.acx-wrap .acx-docs-section h3{padding-top:70px;margin-top:-70px}
#wrap.acx-wrap .acx-spec{margin-bottom:3em}
#wrap.acx-wrap .acx-example{margin-bottom:3em}
.acx-spec{overflow:hidden}
.acx-sidenav{font-size:12px;font-weight:700}
.acx-sidenav li>a{color:#999}
.acx-sidenav li>a:hover{background:transparent;color:#0297d3}
.acx-sidenav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-weight:400}
.acx-sidenav .nav{display:none;padding-bottom:10px}
.acx-sidenav .active .nav{display:block}
.acx-sidenav .active>a{color:#0297d3 !important}
.acx-sidebar .affix{top:70px}

.acx-color-swatch {
    width: 400px;
    padding: 5px;
    margin: 5px;
    color: #ffffff;
    font-size: 13pt;
}
.acx-color-text {
    width: 400px;
    padding: 5px;
    margin: 5px;
    background-color: #ffffff;
    font-size: 13pt;
}
.acx-columns {
    float: left;
    width: 450px;
}
.acx-product-swatch {
    width: 150px;
    padding: 5px;
    margin: 5px;
    color: #ffffff;
    font-size: 13pt;
    float: left;
    text-align: center;
}
.acx-rows {
    clear: both;
}

.acx-page-title {
    font-family: "Helvetica", "Arial" !important;
    font-weight: bold;
    font-size: 18px;
    color: #444444;
}
.acx-container-title{
    font-family: "Helvetica", "Arial" !important;
    font-weight: normal;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: #444444;
}
.acx-headers{
    font-family: "Helvetica", "Arial" !important;
    font-weight: bold;
    font-size: 13px;
    color: #444444;
}
.acx-default-text{
    font-family: "Helvetica", "Arial" !important;
    font-size: 13px;
    line-height: 18px;
    color: #444444;
}
.acx-large-text{
    font-family: "Helvetica", "Arial" !important;
    font-size: 15px;
    line-height: 20px;
    color: #444444;
}
.acx-huge-text{
    font-family: "Helvetica", "Arial" !important;
    font-size: 18px;
    line-height: 20px;
    color: #444444;
}
.acx-huge-mono-text{
    font-family: "ÒLucida Console", Monaco, monospace !important;
    font-size: 18px;
    line-height: 20px;
    color: #444444;
}

.acx-link {
    color: #0177ae !important;
}
.acx-link:hover {
    text-decoration: underline;
}
.acx-link-visited {
    color: #81287c !important;
}
.acx-link-white {
    color: #cde2eb !important;
}
.acx-link-white:hover {
    text-decoration: underline;
}
.acx-link-white-visited {
    color: #ebcce9 !important;
}
.acx-icon-svg {
    max-width: 32px;
    max-height: 32px;
    fill: #999999;
}
.acx-icon-svg:hover {
    fill: #777777;
}