variables.html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->

<!DOCTYPE html><html><head><title>variables | Magento UI Library
</title><meta charset="utf-8"><style>*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;border:0}body{padding:60px 0 40px;background-color:hsl(207,10%,90%);color:hsl(207,5%,30%)}.container{max-width:1300px;margin:0 auto;padding:0 20px}.section{position:relative;margin-bottom:20px}.docs{position:relative;z-index:2;width:68%;min-height:200px;background-color:hsl(207,0%,100%);background-clip:padding-box;border:1px solid hsla(207,5%,5%,.1);border-radius:5px;box-shadow:0 0 3px hsla(207,5%,5%,.1)}.code{position:absolute;top:5px;bottom:5px;right:0;z-index:1;width:33%;padding:10px 10px 10px 20px;border-radius:0 5px 5px 0;border:1px solid hsla(207,20%,10%,.1);background-color:hsla(207,20%,95%,.9);background-clip:padding-box;opacity:.5;-webkit-transition:opacity .4s;-moz-transition:opacity .4s;-o-transition:opacity .4s;transition:opacity .4s}.code:hover{opacity:1}.preview{background:hsl(207,0%,100%);border-top:1px solid hsl(207,30%,95%);position:relative;z-index:1}.preview-code+.preview{margin-top:0;border-top:0}.preview iframe{display:block;width:100%;height:100%;overflow:hidden}.preview-code{position:relative;z-index:2;display:block;width:100%;color:hsl(207,9%,37%);max-height:200px;padding:10px 20px;overflow-y:auto;background:hsl(207,30%,95%);border:1px solid hsl(207,30%,85%);border-left:0;border-right;box-shadow:inset 0 1px 2px hsla(207,30%,10%,.1);line-height:1.1!important;resize:none}.preview-code:focus{outline:0;background:hsl(207,30%,97%);box-shadow:inset 0 1px 2px hsla(207,30%,10%,.1),0 0 5px hsla(207,75%,75%,.9)}.preview-code:last-child{border-bottom:0;border-radius:0 0 5px 5px}.resizeable{padding:15px;overflow:auto;background:hsl(207,0%,100%);box-shadow:0 0 2px hsla(207,10%,20%,.2);resize:both}.preview-code,pre{white-space:pre-wrap;word-wrap:break-word;overflow-y:auto}.code pre{height:100%;margin-top:0}.bar{position:fixed;left:0;right:0;z-index:1010;min-height:40px;line-height:40px;background-image:-webkit-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:-moz-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:-o-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92))}.bar.top{top:0;box-shadow:0 1px 2px hsla(207,5%,0%,.2)}.bar.bottom{bottom:0;box-shadow:0 -1px 2px hsla(207,5%,0%,.2)}.bar ul{margin:0!important}.bar li{display:block;list-style:none}.bar .icon path{fill:hsla(27,10%,75%,.75)}.docs .icon path{fill:hsla(207,10%,75%,.5)}.docs .permalink:hover .icon path{fill:hsl(207,10%,75%)}.bar button{color:hsla(27,10%,75%,.75)}.bar button:hover .icon path,.bar button.is-active .icon path{fill:hsl(27,10%,85%)}.bar button:hover,.bar button.is-active{color:hsl(27,10%,85%)}.bar .icon{vertical-align:middle;display:inline-block}.bar,.bar a,.bar a:visited{color:hsl(27,10%,85%);text-shadow:1px 1px 0 hsla(27,5%,0%,.5)}.bar a:hover,.bar a.is-active{color:hsl(27,10%,95%);text-shadow:1px 1px 0 hsla(27,5%,0%,1);text-decoration:none}.brand{float:left;margin-right:20px;font-weight:700;font-size:16px;text-decoration:none}.brand,a.brand,a.brand:visited{color:hsl(27,5%,5%);text-shadow:1px 1px 0 hsla(27,5%,100%,.2)}.brand:hover,a.brand:hover{color:hsl(27,5%,0%);text-shadow:1px 1px 0 hsla(27,5%,100%,.3);text-decoration:none}.menu{font-size:12px}.menu>li{float:left;position:relative}.menu a{display:block;margin-right:15px}.dropdown-toggle{position:relative;padding-right:15px}.dropdown-toggle:after{display:block;position:absolute;right:0;top:18px;content:'';border:4px solid;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent}.nav-results,.dropdown{position:absolute;z-index:1020;top:32px;left:-16px;width:175px;max-height:500px;padding:10px 0;overflow-y:auto;word-wrap:break-word;font-size:11px;line-height:20px;background-color:hsla(207,10%,25%,.97);border:1px solid hsla(207,5%,70%,.3);border-radius:3px;box-shadow:0 0 3px hsla(207,5%,0%,.2)}.toc-list{width:200px}.nav-results{right:0;width:200px;left:auto;padding:5px 0}.nav-results-filename{display:block;font-size:10px;opacity:.75}.nav-results a{display:block;line-height:15px;padding:5px 10px}.nav-results li:not([hidden])~li a{border-top:1px solid hsla(27,10%,90%,.1)}.dropdown a{padding:0 15px}.dropdown li:hover{background-color:hsl(207,10%,22%)}.nav{float:right;position:relative}.nav input[type="search"]{padding:2px 4px;color:#fff;width:150px;border:1px solid hsla(207,5%,0%,.3);background:hsla(207,12%,40%,.9);box-shadow:inset 1px 1px 3px hsla(207,5%,0%,.05),1px 1px 0 hsla(207,5%,100%,.05);border-radius:10px;-webkit-appearance:textfield}.nav input[type="search"]:focus{outline:0;background:hsla(207,7%,45%,.9)}.settings{text-align:center}.bar button{display:inline-block;vertical-align:middle;padding:0 5px;margin:0 3px;background:transparent}.bar button:first-child{margin-left:0}.settings .auto{line-height:32px;font-size:11px;font-weight:700;letter-spacing:-1px;text-shadow:none;text-transform:uppercase}body{font-family:sans-serif;font-size:14px;line-height:1.618}.docs pre,p,ol,ul,dl,figure,blockquote,table{margin-left:20px;margin-right:20px}.preview,.docs pre,p,ol,ul,dl,figure,blockquote,table{margin-top:10px}ul ul,ol ol,ul ol,ol ul,blockquote p:last-child{margin-top:0}ul,ol{padding-left:1.5em}p:last-child,ol:last-child,ul:last-child,dl:last-child{margin-bottom:20px}hr,h1,h2,h3,h4,h5,h6{margin:1em 20px .5em}h1:first-of-type{margin-top:20px}h1,h2,h3,h4,h5,h6{line-height:1.2;color:hsl(207,10%,50%)}h1 a,h1 a:hover,h1 a:visited{color:inherit;text-decoration:inherit}h1{font-size:3.052em;font-weight:400;color:hsl(207,10%,45%)}h2{font-size:1.953em}h3{font-size:1.536em}h1,h2,h3{letter-spacing:-.025em}h4{font-size:1.25em}h5{font-size:1em;text-transform:uppercase}h6{font-size:1em}.permalink{position:absolute;top:15px;right:15px}a{color:hsl(207,90%,50%);text-decoration:none}a:hover{color:hsl(207,95%,40%);text-decoration:underline}a:visited{color:hsl(207,100%,35%)}.preview-code,pre,code,var{font-style:normal;font-family:"Ubuntu Mono","Andale Mono","DejaVu Sans Mono","Monaco","Bitstream Vera Sans Mono","Consolas","Lucida Console",monospace;font-size:12px}.docs pre,code,var{padding:.1em 3px;background:hsla(207,5%,0%,.025);border:1px solid hsla(207,5%,0%,.05);border-radius:3px}.code pre{line-height:1.1!important}pre code{padding:0;background:transparent;border:0}.cf:before,.cf:after{content:'';display:table}.cf:after{clear:both}[unselectable="on"]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[hidden]{display:none!important}small{font-size:85%;opacity:.9}.docs .vars_list{width:100%}.docs .vars_list th,.docs .vars_list td{width:33%}.docs pre th{text-align:left}.docs pre table{border-collapse:collapse;margin:0}.docs th,.docs td{border:0;padding:9px 10px 9px 0;vertical-align:top}.docs tr th:last-child,.docs tr td:last-child{padding-right:0}.docs pre th{font-weight:400}.docs pre th.vars_head{border-bottom:1px solid #e5e5e5;color:#707070;white-space:nowrap}.docs pre th.vars_section{border-bottom:1px solid #e5e5e5;color:#333;font-size:18px;padding-top:30px}.vars_value{color:#338bb8}.docs li p{margin:0 0 20px}.dropdown a{text-transform:capitalize}#default-button #default-button-big+.preview+.preview-code{display:block}#actions-toolbar-alignment .preview-code,#reverse-primary-and-secondary-blocks .preview-code,#actions-toolbar-indents-customizations .preview-code,#actionstoolbarclearfloats-mixin .preview-code,#responsive-actions-toolbar .preview-code,#button-with-gradient-background .preview-code,#primary-button .preview-code,#button-as-an-icon .preview-code,#button-with-an-icon-on-the-left-or-right-side-of-the-text .preview-code,#button-with-fixed-width .preview-code,#button-as-a-link .preview-code,#link-as-a-button .preview-code,#buttonstyled-breadcrumbs-with-gradient-background-border-and-no-separating-symbol .preview-code,#breadcrumbs-with-solid-background .preview-code,#pagination-without-label-with-solid-background .preview-code,#pagination-with-label-and-text-previousnext-links .preview-code,#pagination-with-label-and-gradient-background-on-links .preview-code,#fixed-height-popup .preview-code,#fixed-content-height-popup .preview-code,#margins-for-header-content-and-footer-block-in-popup .preview-code,#popup-titles-with-styled-as-theme-headings .preview-code,#popup-action-toolbar .preview-code,#popup-close-button-without-an-icon .preview-code,#modify-icon-of-popup-close-button .preview-code,#modify-overlay-styles .preview-code,#rating-summary-multiple-ratings .preview-code,#rating-summary-hide-label .preview-code,#rating-summary-icons-symbol .preview-code,#rating-summary-icons-color .preview-code,#rating-summary-set-number-of-icons .preview-code,#rating-summary .preview-code,#rating-with-vote-icon-symbol .preview-code,#rating-with-vote-setup-icons-colors .preview-code,#rating-with-vote-setup-number-of-icons .preview-code,#tabs-with-content-top-border .preview-code,#accordion-mixin-variables .preview-code,#tabs-base .preview-code,#accordion-base .preview-code,#warning-message .preview-code,#error-message .preview-code,#success-message .preview-code,#notice-message .preview-code,#message-with-inner-icon .preview-code,#message-with-lateral-icon .preview-code,#custom-message-style .preview-code,#modify-dropdown-list-styles .preview-code,#dropdown-with-icon-customization .preview-code,#split-button-button-styling .preview-code,#split-button-icon-customization .preview-code,#split-button-dropdown-list-customization .preview-code,#table-cells-resize .preview-code,#table-caption .preview-code,#table-typography .preview-code,#table-background-customization .preview-code,#table-borders-customization .preview-code,#table-without-borders .preview-code,#table-with-horizontal-borders .preview-code,#table-with-vertical-borders .preview-code,#striped-table .preview-code,#responsive-table-technics-1 .preview-code,#responsive-table-technics-2 .preview-code,#fontsize-mixin .preview-code,#word-breaking-mixin .preview-code,#word-breaking-mixin .preview-code,#text-overflow-mixin .preview-code,#text-hide .preview-code,#hyphens .preview-code,#font-style-and-color .preview-code,#reset-list-styles .preview-code,#inlineblock-list-item-styling .preview-code,#link-styling-mixin .preview-code,#heading-styling-mixin .preview-code,#icon-with-image-or-sprite .preview-code,#change-the-size-of-font-icon .preview-code,#sprite-and-font-icons-for-blank-theme .preview-code,#icon-position-for-an-icon-with-image-or-sprite .preview-code{display:none}article[id$="-variables"] .docs,#resets .docs,#ratings .docs,#tabs-and-accordions .docs,#messages .docs,#dropdown-and-split-buttons-mixins .docs,#font-face-mixin .docs,#layout .docs,#forms-mixins .docs,#including-magento-ui-library-to-your-theme .docs,#global-forms-elements-customization .docs,#mobile-off-canvas-navigation .docs,#desktop-navigation .docs,#utilities .docs,#layout-width .docs,#responsive-breakpoints .docs,#responsive-mixins-usage .docs{width:100%}article[id$="-variables"] .code{display:none}article[id$="-variables"] .docs pre{background:#fff;border:0;margin-top:0}</style><script type="text/preview">(function(){"use strict";var a=function(a){return Array.prototype.slice.call(a)},b=document.getElementsByTagName("body")[0],c=["link","visited","hover","active","focus","target","enabled","disabled","checked"],d=new RegExp(":(("+c.join(")|(")+"))","gi"),e=a(document.styleSheets).map(function(b){return a(b.cssRules).filter(function(a){return a.selectorText&&a.selectorText.match(d)}).map(function(a){return a.cssText.replace(d,".\\3A $1")}).join("")}).join("");if(e.length){var f=document.createElement("style");f.innerText=e;var g=document.getElementsByTagName("style")[0];g.parentNode.insertBefore(f,g)}var h=function(){var a=window.getComputedStyle(b,null);return function(){if(b.childElementCount===0)return b.offsetHeight;var c=b.getElementsByTagName("*"),d=[];for(var e=0,f=c.length;e<f;e++)d.push(c[e].offsetTop+c[e].offsetHeight+parseInt(window.getComputedStyle(c[e],null).getPropertyValue("margin-bottom")));var g=Math.max.apply(Math,d);return g+=parseInt(a.getPropertyValue("padding-bottom"),10),Math.max(g,b.offsetHeight)}}(),i={getHeight:function(){window.parent.postMessage({height:h()},"*")}};window.addEventListener("message",function(a){if(a.data==null)return;typeof a.data=="string"&&i[a.data]()},!1)})()</script><style type="text/preview">@font-face {
    font-family: 'icons-blank-theme';
    src: url('Blank-Theme-Icons/Blank-Theme-Icons.eot');
    src:  url('Blank-Theme-Icons/Blank-Theme-Icons.eot?#iefix') format('embedded-opentype'),
          url('Blank-Theme-Icons/Blank-Theme-Icons.woff') format('woff'),
          url('Blank-Theme-Icons/Blank-Theme-Icons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}@media only screen and (max-width: 767px){.example-responsive-block{ background:#ffc}.example-responsive-block:before{content:'Mobile styles ';font-weight:700}}@media only screen and (max-width: 768px){.modal-popup.modal-slide{ left:14.8rem;z-index:900}.modal-popup.modal-slide._show .modal-inner-wrap{-webkit-transform:translateX(0);transform:translateX(0)}.modal-popup.modal-slide .modal-inner-wrap{height:100%;overflow-y:auto;position:static;-webkit-transform:translateX(100%);transform:translateX(100%);transition-duration:.3s;-webkit-transition-property:-webkit-transform,visibility;transition-property:transform,visibility;transition-timing-function:ease-in-out;width:auto}.modal-popup.modal-slide .modal-inner-wrap{margin:0;max-height:none}}@media all and (min-width: 768px),print{.example-responsive-block{ background:#ccf}.example-responsive-block:before{content:'Desktop styles ';font-weight:700}}.actions-toolbar:before,.actions-toolbar:after{content:'';display:table}.actions-toolbar:after{clear:both}.actions-toolbar .primary{float:left}.actions-toolbar .secondary{float:right}.actions-toolbar .primary,.actions-toolbar .secondary{display:inline-block}.actions-toolbar .primary a.action,.actions-toolbar .secondary a.action{display:inline-block}.actions-toolbar .primary .action{margin:0 5px 0 0}.actions-toolbar .secondary a.action{margin-top:6px}.example-actions-toolbar-1:before,.example-actions-toolbar-1:after{content:'';display:table}.example-actions-toolbar-1:after{clear:both}.example-actions-toolbar-1 .primary{float:left}.example-actions-toolbar-1 .secondary{float:right}.example-actions-toolbar-1 .primary,.example-actions-toolbar-1 .secondary{display:inline-block}.example-actions-toolbar-1 .primary a.action,.example-actions-toolbar-1 .secondary a.action{display:inline-block}.example-actions-toolbar-1 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-1 .secondary a.action{margin-top:6px}.example-actions-toolbar-2:before,.example-actions-toolbar-2:after{content:'';display:table}.example-actions-toolbar-2:after{clear:both}.example-actions-toolbar-2 .primary{float:left}.example-actions-toolbar-2 .secondary{float:right}.example-actions-toolbar-2 .primary,.example-actions-toolbar-2 .secondary{display:inline-block}.example-actions-toolbar-2 .primary a.action,.example-actions-toolbar-2 .secondary a.action{display:inline-block}.example-actions-toolbar-2 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-2 .secondary a.action{margin-top:6px}.example-actions-toolbar-3{text-align:left}.example-actions-toolbar-3:before,.example-actions-toolbar-3:after{content:'';display:table}.example-actions-toolbar-3:after{clear:both}.example-actions-toolbar-3 .primary{float:left}.example-actions-toolbar-3 .primary,.example-actions-toolbar-3 .secondary{display:inline-block}.example-actions-toolbar-3 .primary a.action,.example-actions-toolbar-3 .secondary a.action{display:inline-block}.example-actions-toolbar-3 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-3 .secondary a.action{margin-top:6px}.example-actions-toolbar-4{text-align:right}.example-actions-toolbar-4:before,.example-actions-toolbar-4:after{content:'';display:table}.example-actions-toolbar-4:after{clear:both}.example-actions-toolbar-4 .secondary{float:right}.example-actions-toolbar-4 .primary,.example-actions-toolbar-4 .secondary{display:inline-block}.example-actions-toolbar-4 .primary a.action,.example-actions-toolbar-4 .secondary a.action{display:inline-block}.example-actions-toolbar-4 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-4 .secondary a.action{margin-top:6px}.example-actions-toolbar-5{text-align:center}.example-actions-toolbar-5:before,.example-actions-toolbar-5:after{content:'';display:table}.example-actions-toolbar-5:after{clear:both}.example-actions-toolbar-5 .primary,.example-actions-toolbar-5 .secondary{vertical-align:top}.example-actions-toolbar-5 .primary,.example-actions-toolbar-5 .secondary{display:inline-block}.example-actions-toolbar-5 .primary a.action,.example-actions-toolbar-5 .secondary a.action{display:inline-block}.example-actions-toolbar-5 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-5 .secondary a.action{margin-top:6px}.example-actions-toolbar-6:before,.example-actions-toolbar-6:after{content:'';display:table}.example-actions-toolbar-6:after{clear:both}.example-actions-toolbar-6 .primary{float:right}.example-actions-toolbar-6 .secondary{float:left}.example-actions-toolbar-6 .primary,.example-actions-toolbar-6 .secondary{display:inline-block}.example-actions-toolbar-6 .primary a.action,.example-actions-toolbar-6 .secondary a.action{display:inline-block}.example-actions-toolbar-6 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-6 .secondary a.action{margin-top:6px}.example-actions-toolbar-7{text-align:left}.example-actions-toolbar-7:before,.example-actions-toolbar-7:after{content:'';display:table}.example-actions-toolbar-7:after{clear:both}.example-actions-toolbar-7 .secondary{float:left}.example-actions-toolbar-7 .primary,.example-actions-toolbar-7 .secondary{display:inline-block}.example-actions-toolbar-7 .primary a.action,.example-actions-toolbar-7 .secondary a.action{display:inline-block}.example-actions-toolbar-7 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-7 .secondary a.action{margin-top:6px}.example-actions-toolbar-8{text-align:right}.example-actions-toolbar-8:before,.example-actions-toolbar-8:after{content:'';display:table}.example-actions-toolbar-8:after{clear:both}.example-actions-toolbar-8 .primary{float:right}.example-actions-toolbar-8 .primary,.example-actions-toolbar-8 .secondary{display:inline-block}.example-actions-toolbar-8 .primary a.action,.example-actions-toolbar-8 .secondary a.action{display:inline-block}.example-actions-toolbar-8 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-8 .secondary a.action{margin-top:6px}.example-actions-toolbar-9{margin:10px;padding:10px}.example-actions-toolbar-9:before,.example-actions-toolbar-9:after{content:'';display:table}.example-actions-toolbar-9:after{clear:both}.example-actions-toolbar-9 .primary{float:left}.example-actions-toolbar-9 .secondary{float:right}.example-actions-toolbar-9 .primary,.example-actions-toolbar-9 .secondary{display:inline-block}.example-actions-toolbar-9 .primary a.action,.example-actions-toolbar-9 .secondary a.action{display:inline-block}.example-actions-toolbar-9 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-9 .secondary a.action{margin-top:6px}.example-actions-toolbar-10{text-align:left}.example-actions-toolbar-10:before,.example-actions-toolbar-10:after{content:'';display:table}.example-actions-toolbar-10:after{clear:both}.example-actions-toolbar-10 .primary{float:left}.example-actions-toolbar-10 .primary,.example-actions-toolbar-10 .secondary{display:inline-block}.example-actions-toolbar-10 .primary a.action,.example-actions-toolbar-10 .secondary a.action{display:inline-block}.example-actions-toolbar-10 .primary .action{margin:0 50px 0 0}.example-actions-toolbar-10 .secondary a.action{margin-top:6px}.example-actions-toolbar-11{text-align:left}.example-actions-toolbar-11:before,.example-actions-toolbar-11:after{content:'';display:table}.example-actions-toolbar-11:after{clear:both}.example-actions-toolbar-11 .primary{float:left}.example-actions-toolbar-11 .primary,.example-actions-toolbar-11 .secondary{display:inline-block}.example-actions-toolbar-11 .primary a.action,.example-actions-toolbar-11 .secondary a.action{display:inline-block}.example-actions-toolbar-11 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-11 .secondary .action{margin:0 50px 0 0}.example-actions-toolbar-11 .secondary a.action{margin-top:6px}.example-actions-toolbar-12:before,.example-actions-toolbar-12:after{content:'';display:table}.example-actions-toolbar-12:after{clear:both}.example-actions-toolbar-12 .primary{float:left}.example-actions-toolbar-12 .secondary{float:right}.example-actions-toolbar-12 .primary,.example-actions-toolbar-12 .secondary{display:inline-block}.example-actions-toolbar-12 .primary a.action,.example-actions-toolbar-12 .secondary a.action{display:inline-block}.example-actions-toolbar-12 .primary .action{margin:0 5px 0 0}.example-actions-toolbar-12 .secondary a.action{margin-top:6px}@media only screen and (max-width: 768px){.example-actions-toolbar-12 .primary,.example-actions-toolbar-12 .secondary{ display:block;float:none}}.example-breadcrumbs-1{margin:0 0 20px}.example-breadcrumbs-1 .items{font-size:1.2rem;color:#a3a3a3;margin:0;padding:0;list-style:none none}.example-breadcrumbs-1 .items>li{display:inline-block;vertical-align:top}.example-breadcrumbs-1 .item{margin:0}.example-breadcrumbs-1 a{color:#333;text-decoration:none}.example-breadcrumbs-1 a:visited{color:#333;text-decoration:none}.example-breadcrumbs-1 a:hover{color:#333;text-decoration:underline}.example-breadcrumbs-1 a:active{color:#333;text-decoration:none}.example-breadcrumbs-1 strong{font-weight:400}.example-breadcrumbs-1 .item:not(:last-child){display:inline-block;text-decoration:none}.example-breadcrumbs-1 .item:not(:last-child):after{-webkit-font-smoothing:antialiased;font-size:24px;line-height:18px;content:'\e608';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-breadcrumbs-2{margin:0 0 20px}.example-breadcrumbs-2 .items{font-size:1.2rem;color:#1979c3;margin:0;padding:0;list-style:none none}.example-breadcrumbs-2 .items>li{display:inline-block;vertical-align:top}.example-breadcrumbs-2 .item{margin:0}.example-breadcrumbs-2 a{background-color:#ccc;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #f4f4f4 0, #ccc 100%);background-image:linear-gradient(to bottom, #f4f4f4 0, #ccc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#cccccc', GradientType=0);border:1px solid #ccc;color:#333;display:inline-block;padding:3px 5px;text-decoration:none}.example-breadcrumbs-2 a:visited{background-color:false;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top,false 0,false 100%);background-image:linear-gradient(to bottom,false 0,false 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='false', endColorstr='false', GradientType=0);color:#333;text-decoration:none}.example-breadcrumbs-2 a:hover{background-color:#f4f4f4;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #ccc 0, #f4f4f4 100%);background-image:linear-gradient(to bottom, #ccc 0, #f4f4f4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f4f4f4', GradientType=0);color:#333;text-decoration:none}.example-breadcrumbs-2 a:active{background-color:false;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top,false 0,false 100%);background-image:linear-gradient(to bottom,false 0,false 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='false', endColorstr='false', GradientType=0);color:#333;text-decoration:none}.example-breadcrumbs-2 strong{background-color:#ff5501;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #f7b32e 0, #ff5501 100%);background-image:linear-gradient(to bottom, #f7b32e 0, #ff5501 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7b32e', endColorstr='#ff5501', GradientType=0);border:1px solid #d04b0a;display:inline-block;font-weight:400;padding:3px 5px}.example-breadcrumbs-2 .item:not(:last-child){display:inline-block;text-decoration:none}.example-breadcrumbs-2 .item:not(:last-child):after{-webkit-font-smoothing:antialiased;font-size:24px;line-height:18px;content:'\e608';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-breadcrumbs-3{margin:0 0 20px}.example-breadcrumbs-3 .items{font-size:1.2rem;color:#333;margin:0;padding:0;list-style:none none}.example-breadcrumbs-3 .items>li{display:inline-block;vertical-align:top}.example-breadcrumbs-3 .item{margin:0}.example-breadcrumbs-3 a{background:#f4f4f4;color:#333;display:inline-block;padding:3px 5px;text-decoration:none}.example-breadcrumbs-3 a:visited{color:#333;text-decoration:none}.example-breadcrumbs-3 a:hover{background:#ccc;color:#333;text-decoration:none}.example-breadcrumbs-3 a:active{color:#333;text-decoration:none}.example-breadcrumbs-3 strong{background:#e7e7e7;display:inline-block;font-weight:400;padding:3px 5px}.example-breadcrumbs-3 .item:not(:last-child){display:inline-block;text-decoration:none}.example-breadcrumbs-3 .item:not(:last-child):after{-webkit-font-smoothing:antialiased;font-size:24px;line-height:18px;content:'\e608';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-breadcrumbs-3 .item a{position:relative;margin:0 11px 0 0}.example-breadcrumbs-3 .item a:after{border:12px solid transparent;height:0;width:0;border-left-color:#f4f4f4;content:"";position:absolute;display:block;top:0;right:-23px}.example-breadcrumbs-3 .item a:hover:after{border-color:transparent transparent transparent #ccc}button{background-image:none;background:#f2f2f2;border:1px solid #cdcdcd;color:#333;cursor:pointer;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:3px;padding:7px 15px;font-size:1.4rem;line-height:1.6rem;box-sizing:border-box;vertical-align:middle;border-radius:3px}button:focus,button:active{background:#e2e2e2;border:1px solid #cdcdcd;color:#333}button:hover{background:#e2e2e2;border:1px solid #cdcdcd;color:#555}button.disabled,button[disabled],fieldset[disabled] button{opacity:.5;cursor:default;pointer-events:none}button:active,button:focus{box-shadow:inset 0 2px 1px rgba(0,0,0,.12)}.example-button-1.example-button-2{line-height:2.2rem;padding:14px 17px;font-size:1.8rem}.example-button-1.example-button-3{line-height:1.2rem;padding:5px 8px;font-size:1.1rem;border-radius:0;color:#000}.example-button-1.example-button-3:hover,.example-button-1.example-button-3.active{color:#000}.example-button-10{background:#f2f2f2;border:1px solid #cdcdcd;color:#333;cursor:pointer;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:3px;padding:7px 15px;font-size:1.4rem;line-height:1.6rem;box-sizing:border-box;vertical-align:middle;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400}.example-button-10>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-button-10:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e611';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-button-10:hover:before{color:inherit}.example-button-10:active:before{color:inherit}.example-button-10:focus,.example-button-10:active{background:#e2e2e2;border:1px solid #cdcdcd;color:#333}.example-button-10:hover{background:#e2e2e2;border:1px solid #cdcdcd;color:#555}.example-button-10.disabled,.example-button-10[disabled],fieldset[disabled] .example-button-10{opacity:.5;cursor:default;pointer-events:none}.example-button-10:focus,.example-button-10:active{background:0;border:0}.example-button-10:hover{background:0;border:0}.example-button-10.disabled,.example-button-10[disabled],fieldset[disabled] .example-button-10{cursor:not-allowed;pointer-events:none;opacity:.5}.example-button-11{background-image:none;background:#f2f2f2;border:1px solid #cdcdcd;color:#333;cursor:pointer;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:3px;padding:7px 15px;font-size:1.4rem;line-height:1.6rem;box-sizing:border-box;vertical-align:middle;display:inline-block;text-decoration:none}.example-button-11:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e611';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-button-11:hover:before{color:inherit}.example-button-11:active:before{color:inherit}.example-button-11:focus,.example-button-11:active{background:#e2e2e2;border:1px solid #cdcdcd;color:#333}.example-button-11:hover{background:#e2e2e2;border:1px solid #cdcdcd;color:#555}.example-button-11.disabled,.example-button-11[disabled],fieldset[disabled] .example-button-11{opacity:.5;cursor:default;pointer-events:none}.example-button-12{background-image:none;background:#f2f2f2;border:1px solid #cdcdcd;color:#333;cursor:pointer;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:3px;padding:7px 15px;font-size:1.4rem;line-height:1.6rem;box-sizing:border-box;vertical-align:middle;display:inline-block;text-decoration:none}.example-button-12:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e611';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-button-12:hover:after{color:inherit}.example-button-12:active:after{color:inherit}.example-button-12:focus,.example-button-12:active{background:#e2e2e2;border:1px solid #cdcdcd;color:#333}.example-button-12:hover{background:#e2e2e2;border:1px solid #cdcdcd;color:#555}.example-button-12.disabled,.example-button-12[disabled],fieldset[disabled] .example-button-12{opacity:.5;cursor:default;pointer-events:none}.example-button-13{background-image:none;background:#f2f2f2;border:1px solid #cdcdcd;color:#333;cursor:pointer;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:3px;padding:7px 15px;width:100px;font-size:1.4rem;line-height:1.6rem;box-sizing:border-box;vertical-align:middle}.example-button-13:focus,.example-button-13:active{background:#e2e2e2;border:1px solid #cdcdcd;color:#333}.example-button-13:hover{background:#e2e2e2;border:1px solid #cdcdcd;color:#555}.example-button-13.disabled,.example-button-13[disabled],fieldset[disabled] .example-button-13{opacity:.5;cursor:default;pointer-events:none}.example-button-4{background-image:none;background:#1979c3;border:1px solid #1979c3;color:#fff;cursor:pointer;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:3px;padding:7px 15px;font-size:1.4rem;box-sizing:border-box;vertical-align:middle}.example-button-4:focus,.example-button-4:active{background:#006bb4;border:1px solid #006bb4;color:#fff}.example-button-4:hover{background:#006bb4;border:1px solid #006bb4;color:#fff}.example-button-4.disabled,.example-button-4[disabled],fieldset[disabled] .example-button-4{opacity:.5;cursor:default;pointer-events:none}.example-button-4:active{box-shadow:inset 0 3px 1px rgba(0,0,0,.29)}.example-button-4.example-button-5{line-height:2.2rem;padding:7px 35px;font-size:1.8rem}.example-button-4.example-button-6{line-height:1.2rem;padding:5px 8px;font-size:1.1rem;color:#fff}.example-button-4.example-button-6:hover,.example-button-4.example-button-6.active{color:#fff}.example-button-7{background-image:none;background:#f2f2f2;background-color:#006bb4;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #1979c3 0, #006bb4 100%);background-image:linear-gradient(to bottom, #1979c3 0, #006bb4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1979c3', endColorstr='#006bb4', GradientType=0);border:1px solid #1979c3;color:#fff;cursor:pointer;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:3px;padding:7px 15px;font-size:1.4rem;line-height:1.6rem;box-sizing:border-box;vertical-align:middle;border-radius:3px}.example-button-7:focus,.example-button-7:active{background:#e2e2e2;background-color:#006bb4;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #006bb4 0, #006bb4 100%);background-image:linear-gradient(to bottom, #006bb4 0, #006bb4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006bb4', endColorstr='#006bb4', GradientType=0);border:1px solid #006bb4;color:#fff}.example-button-7:hover{background:#e2e2e2;background-color:#1979c3;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #006bb4 0, #1979c3 100%);background-image:linear-gradient(to bottom, #006bb4 0, #1979c3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006bb4', endColorstr='#1979c3', GradientType=0);border:1px solid #006bb4;color:#fff}.example-button-7.disabled,.example-button-7[disabled],fieldset[disabled] .example-button-7{opacity:.5;cursor:default;pointer-events:none}.example-button-7:active{box-shadow:inset 0 3px 1px rgba(0,0,0,.29)}.example-button-8{line-height:1.42857143;margin:0;padding:0;color:#1979c3;text-decoration:none;background:0;border:0;display:inline;font-weight:400}.example-button-8:visited{color:#1979c3;text-decoration:none}.example-button-8:hover{color:#006bb4;text-decoration:underline}.example-button-8:active{color:#ff5501;text-decoration:underline}.example-button-8:hover{color:#006bb4}.example-button-8:hover,.example-button-8:active,.example-button-8:focus{background:0;border:0}.example-button-8.disabled,.example-button-8[disabled],fieldset[disabled] .example-button-8{color:#1979c3;opacity:.5;cursor:default;pointer-events:none;text-decoration:underline}.example-button-8:active{box-shadow:none}.example-button-9{text-decoration:none;background-image:none;background:#f2f2f2;border:1px solid #cdcdcd;color:#333;cursor:pointer;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:0;padding:7px 15px;font-size:1.4rem;line-height:1.6rem;box-sizing:border-box;vertical-align:middle;margin:3px;border-radius:3px;font-weight:700}.example-button-9:hover,.example-button-9:active,.example-button-9:focus{text-decoration:none}.example-button-9:focus,.example-button-9:active{background:#e2e2e2;border:1px solid #cdcdcd;color:#333}.example-button-9:hover{background:#e2e2e2;border:1px solid #cdcdcd;color:#555}.example-button-9.disabled,.example-button-9[disabled],fieldset[disabled] .example-button-9{opacity:.5;cursor:default;pointer-events:none}.example-button-9:active{box-shadow:inset 0 3px 1px rgba(0,0,0,.29)}.example-button-14{background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400}.example-button-14:focus,.example-button-14:active{background:0;border:0}.example-button-14:hover{background:0;border:0}.example-button-14.disabled,.example-button-14[disabled],fieldset[disabled] .example-button-14{cursor:not-allowed;pointer-events:none;opacity:.5}.example-button-15{background-image:none;background:#1979c3;border:1px solid #1979c3;color:#fff;cursor:pointer;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;padding:7px 15px;font-size:1.4rem;box-sizing:border-box;vertical-align:middle;background:#f2f2f2;border:1px solid #cdcdcd;color:#333}.example-button-15:focus,.example-button-15:active{background:#006bb4;border:1px solid #006bb4;color:#fff}.example-button-15:hover{background:#006bb4;border:1px solid #006bb4;color:#fff}.example-button-15.disabled,.example-button-15[disabled],fieldset[disabled] .example-button-15{opacity:.5;cursor:default;pointer-events:none}.example-button-15:focus,.example-button-15:active{background:#e2e2e2;border:1px solid #cdcdcd;color:#333}.example-button-15:hover{background:#e2e2e2;border:1px solid #cdcdcd;color:#555}.example-button-17{line-height:2.2rem;padding:14px 17px;font-size:1.8rem;font-size:1.4rem;line-height:1.6rem;padding:7px 15px}.example-button-18{font-size:1rem;line-height:1.2rem;padding:4px 10px}body._has-modal{height:100%;overflow:hidden;width:100%}.modals-overlay{z-index:899}.modal-slide,.modal-popup{bottom:0;left:0;min-width:0;position:fixed;right:0;top:0;visibility:hidden}.modal-slide._show,.modal-popup._show{visibility:visible}.modal-slide._show .modal-inner-wrap,.modal-popup._show .modal-inner-wrap{-webkit-transform:translate(0,0);transform:translate(0,0)}.modal-slide .modal-inner-wrap,.modal-popup .modal-inner-wrap{background-color:#fff;box-shadow:0 0 12px 2px rgba(0,0,0,.35);opacity:1;pointer-events:auto}.modal-slide{left:14.8rem;z-index:900}.modal-slide._show .modal-inner-wrap{-webkit-transform:translateX(0);transform:translateX(0)}.modal-slide .modal-inner-wrap{height:100%;overflow-y:auto;position:static;-webkit-transform:translateX(100%);transform:translateX(100%);transition-duration:.3s;-webkit-transition-property:-webkit-transform,visibility;transition-property:transform,visibility;transition-timing-function:ease-in-out;width:auto}.modal-slide._inner-scroll .modal-inner-wrap{overflow-y:visible;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.modal-slide._inner-scroll .modal-header,.modal-slide._inner-scroll .modal-footer{-webkit-flex-grow:0;flex-grow:0;-webkit-flex-shrink:0;flex-shrink:0}.modal-slide._inner-scroll .modal-content{overflow-y:auto}.modal-slide._inner-scroll .modal-footer{margin-top:auto}.modal-slide .modal-header,.modal-slide .modal-content,.modal-slide .modal-footer{padding:0 2.6rem 2.6rem}.modal-slide .modal-header{padding-bottom:2.1rem;padding-top:2.1rem}.modal-popup{z-index:900;left:0;overflow-y:auto}.modal-popup._show .modal-inner-wrap{-webkit-transform:translateY(0);transform:translateY(0)}.modal-popup .modal-inner-wrap{margin:5rem auto;width:75%;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;height:auto;left:0;position:absolute;right:0;-webkit-transform:translateY(-200%);transform:translateY(-200%);transition-duration:.2s;-webkit-transition-property:-webkit-transform,visibility;transition-property:transform,visibility;transition-timing-function:ease}.modal-popup._inner-scroll{overflow-y:visible}.ie10 .modal-popup._inner-scroll,.ie9 .modal-popup._inner-scroll{overflow-y:auto}.modal-popup._inner-scroll .modal-inner-wrap{max-height:90%}.ie10 .modal-popup._inner-scroll .modal-inner-wrap,.ie9 .modal-popup._inner-scroll .modal-inner-wrap{max-height:none}.modal-popup._inner-scroll .modal-content{overflow-y:auto}.modal-popup .modal-header,.modal-popup .modal-content,.modal-popup .modal-footer{padding-left:3rem;padding-right:3rem}.modal-popup .modal-header,.modal-popup .modal-footer{-webkit-flex-grow:0;flex-grow:0;-webkit-flex-shrink:0;flex-shrink:0}.modal-popup .modal-header{padding-bottom:1.2rem;padding-top:3rem}.modal-popup .modal-footer{margin-top:auto;padding-bottom:3rem;padding-top:3rem}.modal-popup .modal-footer-actions{text-align:right}.example-dropdown-1{display:inline-block;position:relative}.example-dropdown-1:before,.example-dropdown-1:after{content:'';display:table}.example-dropdown-1:after{clear:both}.example-dropdown-1 .action.toggle{cursor:pointer;display:inline-block;text-decoration:none}.example-dropdown-1 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-1 .action.toggle:hover:after{color:inherit}.example-dropdown-1 .action.toggle:active:after{color:inherit}.example-dropdown-1 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-1 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-1 .action.toggle.active:hover:after{color:inherit}.example-dropdown-1 .action.toggle.active:active:after{color:inherit}.example-dropdown-1 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.example-dropdown-1 ul.dropdown li{margin:0;padding:3px 5px}.example-dropdown-1 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.example-dropdown-1 ul.dropdown:before,.example-dropdown-1 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.example-dropdown-1 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.example-dropdown-1 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.example-dropdown-1 ul.dropdown:before{left:10px;top:-12px}.example-dropdown-1 ul.dropdown:after{left:9px;top:-14px}.example-dropdown-1.active{overflow:visible}.example-dropdown-1.active ul.dropdown{display:block}.example-dropdown-2{display:inline-block;position:relative}.example-dropdown-2:before,.example-dropdown-2:after{content:'';display:table}.example-dropdown-2:after{clear:both}.example-dropdown-2 .action.toggle{cursor:pointer;display:inline-block;text-decoration:none}.example-dropdown-2 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-2 .action.toggle:hover:after{color:inherit}.example-dropdown-2 .action.toggle:active:after{color:inherit}.example-dropdown-2 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-2 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-2 .action.toggle.active:hover:after{color:inherit}.example-dropdown-2 .action.toggle.active:active:after{color:inherit}.example-dropdown-2 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.example-dropdown-2 ul.dropdown li{margin:0;padding:3px 5px}.example-dropdown-2 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.example-dropdown-2 ul.dropdown:before,.example-dropdown-2 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.example-dropdown-2 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.example-dropdown-2 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.example-dropdown-2 ul.dropdown:before{left:10px;top:-12px}.example-dropdown-2 ul.dropdown:after{left:9px;top:-14px}.example-dropdown-2.active{overflow:visible}.example-dropdown-2.active ul.dropdown{display:block}.example-dropdown-3{display:inline-block;position:relative}.example-dropdown-3:before,.example-dropdown-3:after{content:'';display:table}.example-dropdown-3:after{clear:both}.example-dropdown-3 .action.toggle{cursor:pointer;display:inline-block;text-decoration:none}.example-dropdown-3 .action.toggle:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:1;color:red;content:'\e61c';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-3 .action.toggle:hover:before{color:red}.example-dropdown-3 .action.toggle:active:before{color:inherit}.example-dropdown-3 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-3 .action.toggle.active:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:1;color:red;content:'\e60f';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-3 .action.toggle.active:hover:before{color:red}.example-dropdown-3 .action.toggle.active:active:before{color:inherit}.example-dropdown-3 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.example-dropdown-3 ul.dropdown li{margin:0;padding:3px 5px}.example-dropdown-3 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.example-dropdown-3 ul.dropdown:before,.example-dropdown-3 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.example-dropdown-3 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.example-dropdown-3 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.example-dropdown-3 ul.dropdown:before{left:10px;top:-12px}.example-dropdown-3 ul.dropdown:after{left:9px;top:-14px}.example-dropdown-3.active{overflow:visible}.example-dropdown-3.active ul.dropdown{display:block}.example-dropdown-5{display:inline-block;position:relative}.example-dropdown-5:before,.example-dropdown-5:after{content:'';display:table}.example-dropdown-5:after{clear:both}.example-dropdown-5 .action.toggle{cursor:pointer;display:inline-block;text-decoration:none}.example-dropdown-5 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:1;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-5 .action.toggle:hover:after{color:inherit}.example-dropdown-5 .action.toggle:active:after{color:inherit}.example-dropdown-5 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-5 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:1;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-5 .action.toggle.active:hover:after{color:inherit}.example-dropdown-5 .action.toggle.active:active:after{color:inherit}.example-dropdown-5 ul.dropdown{margin:0;padding:0;list-style:none none;background:#eef1f3;border:2px solid #ced1d4;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%}.example-dropdown-5 ul.dropdown li{margin:0;padding:10px;border-top:2px solid #e8eaed}.example-dropdown-5 ul.dropdown li:first-child{border:0}.example-dropdown-5 ul.dropdown li:hover{background:#d8e3e3;cursor:pointer}.example-dropdown-5.active{overflow:visible}.example-dropdown-5.active ul.dropdown{display:block}.example-dropdown-6{display:inline-block;position:relative}.example-dropdown-6:before,.example-dropdown-6:after{content:'';display:table}.example-dropdown-6:after{clear:both}.example-dropdown-6 .action.split{float:left;margin:0}.example-dropdown-6 .action.toggle{float:right;margin:0}.example-dropdown-6 button.action.split{border-bottom-right-radius:0;border-top-right-radius:0}.example-dropdown-6 button+.action.toggle{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.example-dropdown-6 .action.toggle{padding:4px 5px;display:inline-block;text-decoration:none}.example-dropdown-6 .action.toggle>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-6 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-6 .action.toggle:hover:after{color:inherit}.example-dropdown-6 .action.toggle:active:after{color:inherit}.example-dropdown-6 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-6 .action.toggle.active>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-6 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-6 .action.toggle.active:hover:after{color:inherit}.example-dropdown-6 .action.toggle.active:active:after{color:inherit}.example-dropdown-6 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.example-dropdown-6 ul.dropdown li{margin:0;padding:3px 5px}.example-dropdown-6 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.example-dropdown-6 ul.dropdown:before,.example-dropdown-6 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.example-dropdown-6 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.example-dropdown-6 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.example-dropdown-6 ul.dropdown:before{right:10px;top:-12px}.example-dropdown-6 ul.dropdown:after{right:9px;top:-14px}.example-dropdown-6.active{overflow:visible}.example-dropdown-6.active ul.dropdown{display:block}.split.example-dropdown-7{display:inline-block;position:relative}.split.example-dropdown-7:before,.split.example-dropdown-7:after{content:'';display:table}.split.example-dropdown-7:after{clear:both}.split.example-dropdown-7 .action.split{float:left;margin:0}.split.example-dropdown-7 .action.toggle{float:right;margin:0}.split.example-dropdown-7 .action.toggle{padding:4px 5px;display:inline-block;text-decoration:none}.split.example-dropdown-7 .action.toggle>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.split.example-dropdown-7 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.split.example-dropdown-7 .action.toggle:hover:after{color:inherit}.split.example-dropdown-7 .action.toggle:active:after{color:inherit}.split.example-dropdown-7 .action.toggle.active{display:inline-block;text-decoration:none}.split.example-dropdown-7 .action.toggle.active>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.split.example-dropdown-7 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.split.example-dropdown-7 .action.toggle.active:hover:after{color:inherit}.split.example-dropdown-7 .action.toggle.active:active:after{color:inherit}.split.example-dropdown-7 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.split.example-dropdown-7 ul.dropdown li{margin:0;padding:3px 5px}.split.example-dropdown-7 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.split.example-dropdown-7 ul.dropdown:before,.split.example-dropdown-7 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.split.example-dropdown-7 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.split.example-dropdown-7 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.split.example-dropdown-7 ul.dropdown:before{right:10px;top:-12px}.split.example-dropdown-7 ul.dropdown:after{right:9px;top:-14px}.split.example-dropdown-7.active{overflow:visible}.split.example-dropdown-7.active ul.dropdown{display:block}.example-dropdown-8{display:inline-block;position:relative}.example-dropdown-8:before,.example-dropdown-8:after{content:'';display:table}.example-dropdown-8:after{clear:both}.example-dropdown-8 .action.split{float:left;margin:0}.example-dropdown-8 .action.toggle{float:right;margin:0}.example-dropdown-8 button.action.split{border-bottom-right-radius:0;border-top-right-radius:0}.example-dropdown-8 button+.action.toggle{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.example-dropdown-8 .action.toggle{padding:4px 5px;display:inline-block;text-decoration:none}.example-dropdown-8 .action.toggle>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-8 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-8 .action.toggle:hover:after{color:inherit}.example-dropdown-8 .action.toggle:active:after{color:inherit}.example-dropdown-8 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-8 .action.toggle.active>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-8 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-8 .action.toggle.active:hover:after{color:inherit}.example-dropdown-8 .action.toggle.active:active:after{color:inherit}.example-dropdown-8 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.example-dropdown-8 ul.dropdown li{margin:0;padding:3px 5px}.example-dropdown-8 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.example-dropdown-8 ul.dropdown:before,.example-dropdown-8 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.example-dropdown-8 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.example-dropdown-8 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.example-dropdown-8 ul.dropdown:before{right:10px;top:-12px}.example-dropdown-8 ul.dropdown:after{right:9px;top:-14px}.example-dropdown-8.active{overflow:visible}.example-dropdown-8.active ul.dropdown{display:block}.example-dropdown-9{display:inline-block;position:relative}.example-dropdown-9 .action.split,.example-dropdown-9 .action.toggle{line-height:2.2rem;padding:14px 17px;font-size:1.8rem}.example-dropdown-9:before,.example-dropdown-9:after{content:'';display:table}.example-dropdown-9:after{clear:both}.example-dropdown-9 .action.split{float:left;margin:0}.example-dropdown-9 .action.toggle{float:right;margin:0}.example-dropdown-9 button.action.split{border-bottom-right-radius:0;border-top-right-radius:0}.example-dropdown-9 button+.action.toggle{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.example-dropdown-9 .action.toggle{padding:4px 5px;display:inline-block;text-decoration:none}.example-dropdown-9 .action.toggle>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-9 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-9 .action.toggle:hover:after{color:inherit}.example-dropdown-9 .action.toggle:active:after{color:inherit}.example-dropdown-9 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-9 .action.toggle.active>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-9 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-9 .action.toggle.active:hover:after{color:inherit}.example-dropdown-9 .action.toggle.active:active:after{color:inherit}.example-dropdown-9 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.example-dropdown-9 ul.dropdown li{margin:0;padding:3px 5px}.example-dropdown-9 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.example-dropdown-9 ul.dropdown:before,.example-dropdown-9 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.example-dropdown-9 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.example-dropdown-9 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.example-dropdown-9 ul.dropdown:before{right:10px;top:-12px}.example-dropdown-9 ul.dropdown:after{right:9px;top:-14px}.example-dropdown-9.active{overflow:visible}.example-dropdown-9.active ul.dropdown{display:block}.example-dropdown-10{display:inline-block;position:relative}.example-dropdown-10 .action.split,.example-dropdown-10 .action.toggle{line-height:1.2rem;padding:5px 8px;font-size:1.1rem}.example-dropdown-10:before,.example-dropdown-10:after{content:'';display:table}.example-dropdown-10:after{clear:both}.example-dropdown-10 .action.split{float:left;margin:0}.example-dropdown-10 .action.toggle{float:right;margin:0}.example-dropdown-10 button.action.split{border-bottom-right-radius:0;border-top-right-radius:0}.example-dropdown-10 button+.action.toggle{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.example-dropdown-10 .action.toggle{padding:4px 5px;display:inline-block;text-decoration:none}.example-dropdown-10 .action.toggle>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-10 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-10 .action.toggle:hover:after{color:inherit}.example-dropdown-10 .action.toggle:active:after{color:inherit}.example-dropdown-10 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-10 .action.toggle.active>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-10 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-10 .action.toggle.active:hover:after{color:inherit}.example-dropdown-10 .action.toggle.active:active:after{color:inherit}.example-dropdown-10 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.example-dropdown-10 ul.dropdown li{margin:0;padding:3px 5px}.example-dropdown-10 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.example-dropdown-10 ul.dropdown:before,.example-dropdown-10 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.example-dropdown-10 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.example-dropdown-10 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.example-dropdown-10 ul.dropdown:before{right:10px;top:-12px}.example-dropdown-10 ul.dropdown:after{right:9px;top:-14px}.example-dropdown-10.active{overflow:visible}.example-dropdown-10.active ul.dropdown{display:block}.example-dropdown-11{display:inline-block;position:relative}.example-dropdown-11:before,.example-dropdown-11:after{content:'';display:table}.example-dropdown-11:after{clear:both}.example-dropdown-11 .action.split{float:right;margin:0}.example-dropdown-11 .action.toggle{float:left;margin:0}.example-dropdown-11 button.action.split{border-bottom-left-radius:0;border-top-left-radius:0}.example-dropdown-11 button+.action.toggle{border-bottom-right-radius:0;border-right:0;border-top-right-radius:0}.example-dropdown-11 .action.toggle{padding:4px 5px;display:inline-block;text-decoration:none}.example-dropdown-11 .action.toggle>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-11 .action.toggle:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:red;content:'\e61c';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-11 .action.toggle:hover:before{color:red}.example-dropdown-11 .action.toggle:active:before{color:inherit}.example-dropdown-11 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-11 .action.toggle.active>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-11 .action.toggle.active:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:red;content:'\e60f';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-11 .action.toggle.active:hover:before{color:red}.example-dropdown-11 .action.toggle.active:active:before{color:inherit}.example-dropdown-11 ul.dropdown{margin:0;padding:0;list-style:none none;background:#fff;border:1px solid #bbb;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%;box-shadow:0 3px 3px rgba(0,0,0,.15)}.example-dropdown-11 ul.dropdown li{margin:0;padding:3px 5px}.example-dropdown-11 ul.dropdown li:hover{background:#e8e8e8;cursor:pointer}.example-dropdown-11 ul.dropdown:before,.example-dropdown-11 ul.dropdown:after{border-bottom-style:solid;content:'';display:block;height:0;position:absolute;width:0}.example-dropdown-11 ul.dropdown:before{border:6px solid;border-color:transparent transparent #fff transparent;z-index:99}.example-dropdown-11 ul.dropdown:after{border:7px solid;border-color:transparent transparent #bbb transparent;z-index:98}.example-dropdown-11 ul.dropdown:before{right:10px;top:-12px}.example-dropdown-11 ul.dropdown:after{right:9px;top:-14px}.example-dropdown-11.active{overflow:visible}.example-dropdown-11.active ul.dropdown{display:block}.example-dropdown-12{display:inline-block;position:relative}.example-dropdown-12:before,.example-dropdown-12:after{content:'';display:table}.example-dropdown-12:after{clear:both}.example-dropdown-12 .action.split{float:left;margin:0}.example-dropdown-12 .action.toggle{float:right;margin:0}.example-dropdown-12 button.action.split{border-bottom-right-radius:0;border-top-right-radius:0}.example-dropdown-12 button+.action.toggle{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.example-dropdown-12 .action.toggle{padding:4px 5px;display:inline-block;text-decoration:none}.example-dropdown-12 .action.toggle>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-12 .action.toggle:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e607';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-12 .action.toggle:hover:after{color:inherit}.example-dropdown-12 .action.toggle:active:after{color:inherit}.example-dropdown-12 .action.toggle.active{display:inline-block;text-decoration:none}.example-dropdown-12 .action.toggle.active>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-dropdown-12 .action.toggle.active:after{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e618';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-dropdown-12 .action.toggle.active:hover:after{color:inherit}.example-dropdown-12 .action.toggle.active:active:after{color:inherit}.example-dropdown-12 ul.dropdown{margin:0;padding:0;list-style:none none;background:#eef1f3;border:2px solid #ced1d4;margin-top:4px;min-width:100%;z-index:100;box-sizing:border-box;display:none;position:absolute;top:100%}.example-dropdown-12 ul.dropdown li{margin:0;padding:10px;border-top:2px solid #e8eaed}.example-dropdown-12 ul.dropdown li:first-child{border:0}.example-dropdown-12 ul.dropdown li:hover{background:#d8e3e3;cursor:pointer}.example-dropdown-12.active{overflow:visible}.example-dropdown-12.active ul.dropdown{display:block}.example-form-1 .example-form-1-fieldset{border:0;margin:0 0 40px;padding:0;letter-spacing:-.31em}.example-form-1 .example-form-1-fieldset>*{letter-spacing:normal}.example-form-1 .example-form-1-fieldset>.legend{margin:0 0 25px;padding:0;box-sizing:border-box;float:left;line-height:1.2;font-size:2rem}.example-form-1 .example-form-1-fieldset>.legend+br{clear:both;display:block;height:0;overflow:hidden;visibility:hidden}.example-form-1 .example-form-1-fieldset:after{margin:10px 0 0;content:attr(data-hasrequired);display:block;letter-spacing:normal;word-spacing:normal;color:#e02b27;font-size:1.2rem}.example-form-1 .example-form-1-fieldset>.field{margin:0 0 20px}.example-form-1 .example-form-1-fieldset>.field>.label{margin:0 0 5px;display:inline-block}.example-form-1 .example-form-1-fieldset>.field:last-child{margin-bottom:0}.example-form-1 .example-form-1-fieldset>.field>.label{font-weight:700}.example-form-1 .example-form-1-fieldset>.field>.label+br{display:none}.example-form-1 .example-form-1-fieldset>.field .choice input{vertical-align:top}.example-form-1 .example-form-1-fieldset>.field .fields.group:before,.example-form-1 .example-form-1-fieldset>.field .fields.group:after{content:'';display:table}.example-form-1 .example-form-1-fieldset>.field .fields.group:after{clear:both}.example-form-1 .example-form-1-fieldset>.field .fields.group .field{box-sizing:border-box;float:left}.example-form-1 .example-form-1-fieldset>.field .fields.group.group-2 .field{width:50%!important}.example-form-1 .example-form-1-fieldset>.field .fields.group.group-3 .field{width:33.3%!important}.example-form-1 .example-form-1-fieldset>.field .fields.group.group-4 .field{width:25%!important}.example-form-1 .example-form-1-fieldset>.field .fields.group.group-5 .field{width:20%!important}.example-form-1 .example-form-1-fieldset>.field .addon{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;padding:0;width:100%}.example-form-1 .example-form-1-fieldset>.field .addon textarea,.example-form-1 .example-form-1-fieldset>.field .addon select,.example-form-1 .example-form-1-fieldset>.field .addon input{-ms-flex-order:2;-webkit-order:2;order:2;-webkit-flex-basis:100%;flex-basis:100%;display:inline-block;margin:0;width:auto}.example-form-1 .example-form-1-fieldset>.field .addon .addbefore,.example-form-1 .example-form-1-fieldset>.field .addon .addafter{background:#fff;background-clip:padding-box;border:1px solid #c2c2c2;border-radius:1px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;height:32px;line-height:1.428571429;padding:0 9px;vertical-align:baseline;width:100%;box-sizing:border-box;-ms-flex-order:3;-webkit-order:3;order:3;display:inline-block;vertical-align:middle;white-space:nowrap;width:auto}.example-form-1 .example-form-1-fieldset>.field .addon .addbefore:disabled,.example-form-1 .example-form-1-fieldset>.field .addon .addafter:disabled{opacity:.5}.example-form-1 .example-form-1-fieldset>.field .addon .addbefore::-moz-placeholder,.example-form-1 .example-form-1-fieldset>.field .addon .addafter::-moz-placeholder{color:#c2c2c2}.example-form-1 .example-form-1-fieldset>.field .addon .addbefore::-webkit-input-placeholder,.example-form-1 .example-form-1-fieldset>.field .addon .addafter::-webkit-input-placeholder{color:#c2c2c2}.example-form-1 .example-form-1-fieldset>.field .addon .addbefore:-ms-input-placeholder,.example-form-1 .example-form-1-fieldset>.field .addon .addafter:-ms-input-placeholder{color:#c2c2c2}.example-form-1 .example-form-1-fieldset>.field .addon .addbefore{float:left;-ms-flex-order:1;-webkit-order:1;order:1}.example-form-1 .example-form-1-fieldset>.field .additional{margin-top:10px}.example-form-1 .example-form-1-fieldset>.field.required>.label:after,.example-form-1 .example-form-1-fieldset>.field._required>.label:after{content:'*';color:#e02b27;font-size:1.2rem;margin:0 0 0 5px}.example-form-1 .example-form-1-fieldset>.field .note{font-size:1.2rem;margin:3px 0 0;padding:0;display:inline-block;text-decoration:none}.example-form-1 .example-form-1-fieldset>.field .note:before{-webkit-font-smoothing:antialiased;font-size:24px;line-height:12px;content:'\e618';font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-form-2 .example-form-2-fieldset{border:0;margin:0 0 40px;padding:0;letter-spacing:-.31em}.example-form-2 .example-form-2-fieldset>*{letter-spacing:normal}.example-form-2 .example-form-2-fieldset>.legend{margin:0 0 25px;padding:0;box-sizing:border-box;float:left;line-height:1.2;font-size:2rem}.example-form-2 .example-form-2-fieldset>.legend+br{clear:both;display:block;height:0;overflow:hidden;visibility:hidden}.example-form-2 .example-form-2-fieldset>.field{margin:0 0 20px;padding:0 12px 0 0;box-sizing:border-box;display:inline-block;width:50%;vertical-align:top}.example-form-2 .example-form-2-fieldset>.field>.label{margin:0 0 5px;display:inline-block}.example-form-2 .example-form-2-fieldset>.field:last-child{margin-bottom:0}.example-form-2 .example-form-2-fieldset>.field+.fieldset{clear:both}.example-form-2 .example-form-2-fieldset>.field>.label{font-weight:700}.example-form-2 .example-form-2-fieldset>.field>.label+br{display:none}.example-form-2 .example-form-2-fieldset>.field .choice input{vertical-align:top}.example-form-2 .example-form-2-fieldset>.field .fields.group:before,.example-form-2 .example-form-2-fieldset>.field .fields.group:after{content:'';display:table}.example-form-2 .example-form-2-fieldset>.field .fields.group:after{clear:both}.example-form-2 .example-form-2-fieldset>.field .fields.group .field{box-sizing:border-box;float:left}.example-form-2 .example-form-2-fieldset>.field .fields.group.group-2 .field{width:50%!important}.example-form-2 .example-form-2-fieldset>.field .fields.group.group-3 .field{width:33.3%!important}.example-form-2 .example-form-2-fieldset>.field .fields.group.group-4 .field{width:25%!important}.example-form-2 .example-form-2-fieldset>.field .fields.group.group-5 .field{width:20%!important}.example-form-2 .example-form-2-fieldset>.field .addon{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;padding:0;width:100%}.example-form-2 .example-form-2-fieldset>.field .addon textarea,.example-form-2 .example-form-2-fieldset>.field .addon select,.example-form-2 .example-form-2-fieldset>.field .addon input{-ms-flex-order:2;-webkit-order:2;order:2;-webkit-flex-basis:100%;flex-basis:100%;display:inline-block;margin:0;width:auto}.example-form-2 .example-form-2-fieldset>.field .addon .addbefore,.example-form-2 .example-form-2-fieldset>.field .addon .addafter{background:#fff;background-clip:padding-box;border:1px solid #c2c2c2;border-radius:1px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;height:32px;line-height:1.428571429;padding:0 9px;vertical-align:baseline;width:100%;box-sizing:border-box;-ms-flex-order:3;-webkit-order:3;order:3;display:inline-block;vertical-align:middle;white-space:nowrap;width:auto}.example-form-2 .example-form-2-fieldset>.field .addon .addbefore:disabled,.example-form-2 .example-form-2-fieldset>.field .addon .addafter:disabled{opacity:.5}.example-form-2 .example-form-2-fieldset>.field .addon .addbefore::-moz-placeholder,.example-form-2 .example-form-2-fieldset>.field .addon .addafter::-moz-placeholder{color:#c2c2c2}.example-form-2 .example-form-2-fieldset>.field .addon .addbefore::-webkit-input-placeholder,.example-form-2 .example-form-2-fieldset>.field .addon .addafter::-webkit-input-placeholder{color:#c2c2c2}.example-form-2 .example-form-2-fieldset>.field .addon .addbefore:-ms-input-placeholder,.example-form-2 .example-form-2-fieldset>.field .addon .addafter:-ms-input-placeholder{color:#c2c2c2}.example-form-2 .example-form-2-fieldset>.field .addon .addbefore{float:left;-ms-flex-order:1;-webkit-order:1;order:1}.example-form-2 .example-form-2-fieldset>.field .additional{margin-top:10px}.example-form-2 .example-form-2-fieldset>.field.required>.label:after,.example-form-2 .example-form-2-fieldset>.field._required>.label:after{content:'*';color:#e02b27;font-size:1.2rem;margin:0 0 0 5px}.example-form-2 .example-form-2-fieldset>.field .note{font-size:1.2rem;margin:3px 0 0;padding:0;display:inline-block;text-decoration:none}.example-form-2 .example-form-2-fieldset>.field .note:before{-webkit-font-smoothing:antialiased;font-size:24px;line-height:12px;content:'\e618';font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}input[type="text"],input[type="password"],input[type="url"],input[type="tel"],input[type="search"],input[type="number"],input[type="datetime"],input[type="email"]{background:#fff;background-clip:padding-box;border:1px solid #c2c2c2;border-radius:1px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;height:32px;line-height:1.428571429;padding:0 9px;vertical-align:baseline;width:100%;box-sizing:border-box;margin-bottom:20px}input[type="text"]:disabled,input[type="password"]:disabled,input[type="url"]:disabled,input[type="tel"]:disabled,input[type="search"]:disabled,input[type="number"]:disabled,input[type="datetime"]:disabled,input[type="email"]:disabled{opacity:.5}input[type="text"]::-moz-placeholder,input[type="password"]::-moz-placeholder,input[type="url"]::-moz-placeholder,input[type="tel"]::-moz-placeholder,input[type="search"]::-moz-placeholder,input[type="number"]::-moz-placeholder,input[type="datetime"]::-moz-placeholder,input[type="email"]::-moz-placeholder{color:#c2c2c2}input[type="text"]::-webkit-input-placeholder,input[type="password"]::-webkit-input-placeholder,input[type="url"]::-webkit-input-placeholder,input[type="tel"]::-webkit-input-placeholder,input[type="search"]::-webkit-input-placeholder,input[type="number"]::-webkit-input-placeholder,input[type="datetime"]::-webkit-input-placeholder,input[type="email"]::-webkit-input-placeholder{color:#c2c2c2}input[type="text"]:-ms-input-placeholder,input[type="password"]:-ms-input-placeholder,input[type="url"]:-ms-input-placeholder,input[type="tel"]:-ms-input-placeholder,input[type="search"]:-ms-input-placeholder,input[type="number"]:-ms-input-placeholder,input[type="datetime"]:-ms-input-placeholder,input[type="email"]:-ms-input-placeholder{color:#c2c2c2}select{background:#fff;background-clip:padding-box;border:1px solid #c2c2c2;border-radius:1px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;height:32px;line-height:1.428571429;padding:5px 10px 4px;vertical-align:baseline;width:100%;box-sizing:border-box;margin-bottom:20px}select:disabled{opacity:.5}select[multiple="multiple"]{height:auto;margin-bottom:20px}textarea{background:#fff;background-clip:padding-box;border:1px solid #c2c2c2;border-radius:1px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;height:auto;line-height:1.428571429;margin:0;padding:10px;vertical-align:baseline;width:100%;box-sizing:border-box;resize:vertical}textarea:disabled{opacity:.5}textarea::-moz-placeholder{color:#c2c2c2}textarea::-webkit-input-placeholder{color:#c2c2c2}textarea:-ms-input-placeholder{color:#c2c2c2}input[type="checkbox"]{margin:2px 5px 0 0}input[type="checkbox"]:disabled{opacity:.5}input[type="radio"]{margin:2px 5px 0 0}input[type="radio"]:disabled{opacity:.5}input.text-example-1,select.select-example-1,textarea.textarea-example-1{background:#fdf0d5;border-color:#fc0;color:#b30000}input.text-example-1:focus,select.select-example-1:focus,textarea.textarea-example-1:focus{border-color:#cff;color:#060}input.text-example-1:disabled,select.select-example-1:disabled,textarea.textarea-example-1:disabled{color:#fcc}input.text-example-1::-moz-placeholder,textarea.textarea-example-1::-moz-placeholder{color:#ccc}input.text-example-1::-webkit-input-placeholder,textarea.textarea-example-1::-webkit-input-placeholder{color:#ccc}input.text-example-1:-ms-input-placeholder,textarea.textarea-example-1:-ms-input-placeholder{color:#ccc}.number-example{-moz-appearance:textfield}.number-example::-webkit-inner-spin-button,.number-example::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.search-example{-webkit-appearance:none}.search-example::-webkit-search-cancel-button,.search-example::-webkit-search-decoration,.search-example::-webkit-search-results-button,.search-example::-webkit-search-results-decoration{-webkit-appearance:none}input,textarea,select{color:#e02b27;font-size:1.2rem}.example-icon-1{display:inline-block}.example-icon-1:before{background-image:url('images/blank-theme-icons.png');background-position-x:0;background-position-y:0;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.example-icon-2{display:inline-block}.example-icon-2:after{background-image:url('images/blank-theme-icons.png');background-position-x:-26px;background-position-y:0;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.example-icon-3{display:inline-block}.example-icon-3>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-icon-3:before{background-image:url('images/blank-theme-icons.png');background-position-x:-156px;background-position-y:-52px;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.example-icon-4{display:inline-block;text-decoration:none}.example-icon-4:before{-webkit-font-smoothing:antialiased;font-size:24px;line-height:inherit;color:inherit;content:'\e606';font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-icon-5{display:inline-block;text-decoration:none}.example-icon-5:after{-webkit-font-smoothing:antialiased;font-size:24px;line-height:inherit;color:inherit;content:'\e605';font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-icon-6{display:inline-block;text-decoration:none}.example-icon-6>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-icon-6:before{-webkit-font-smoothing:antialiased;font-size:24px;line-height:inherit;color:inherit;content:'\e61b';font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-icon-7{display:inline-block}.example-icon-7:before{background-image:url('images/blank-theme-icons.png');background-position-x:0;background-position-y:0;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.example-icon-8{display:inline-block}.example-icon-8:before{background-image:url('images/blank-theme-icons.png');background-position-x:0;background-position-y:0;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.example-icon-8:before{background-position:-182px 0}.example-icon-9{display:inline-block}.example-icon-9:after{background-image:url('images/blank-theme-icons.png');background-position-x:0;background-position-y:0;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.example-icon-9:after{background-position:-52px -26px}.example-icon-10{display:inline-block}.example-icon-10:before{background-image:url('images/blank-theme-icons.png');background-position-x:0;background-position-y:0;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.example-icon-10:before{background-position:-104px 0}.example-icon-11{display:inline-block}.example-icon-11:before{background-image:url('images/blank-theme-icons.png');background-position-x:0;background-position-y:0;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.example-icon-11:before{height:30px;width:30px}.example-icon-11:after{height:30px;width:30px}.example-icon-11:before{background-color:#f1f1f1}.example-icon-12{display:inline-block;text-decoration:none}.example-icon-12:before{-webkit-font-smoothing:antialiased;font-size:28px;line-height:inherit;color:inherit;content:'\e612';font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-icon-13{display:inline-block;text-decoration:none}.example-icon-13:before{-webkit-font-smoothing:antialiased;font-size:inherit;line-height:inherit;color:inherit;content:'\e612';font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-icon-13:before{font-size:26px;line-height:inherit}.example-icon-14{display:inline-block;text-decoration:none}.example-icon-14:before{-webkit-font-smoothing:antialiased;font-size:26px;line-height:inherit;color:inherit;content:'\e61d';font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-icon-14>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.icons-image-list{list-style:none;padding:0}.icons-image-list li{float:left;width:33%}.icons-image-list li>span{display:inline-block}.icons-image-list li>span:before{background-image:url('images/blank-theme-icons.png');background-position-x:0;background-position-y:0;line-height:26px;vertical-align:middle;height:26px;width:26px;background-repeat:no-repeat;content:'';display:inline-block}.icons-image-list li .icon-search:before{background-position:0 0}.icons-image-list li .icon-cart:before{background-position:-26px 0}.icons-image-list li .icon-arrow-down:before{background-position:-52px 0}.icons-image-list li .icon-arrow-up:before{background-position:-78px 0}.icons-image-list li .icon-grid:before{background-position:-104px 0}.icons-image-list li .icon-list:before{background-position:-130px 0}.icons-image-list li .icon-remove:before{background-position:-156px 0}.icons-image-list li .icon-star:before{background-position:-182px 0}.icons-image-list li .icon-pointer-down:before{background-position:-208px 0}.icons-image-list li .icon-pointer-up:before{background-position:-234px 0}.icons-image-list li .icon-pointer-left:before{background-position:-260px 0}.icons-image-list li .icon-pointer-right:before{background-position:-286px 0}.icons-image-list li .icon-compare-empty:before{background-position:0 -26px}.icons-image-list li .icon-compare-full:before{background-position:-26px -26px}.icons-image-list li .icon-wishlist-empty:before{background-position:-52px -26px}.icons-image-list li .icon-wishlist-full:before{background-position:-78px -26px}.icons-image-list li .icon-update:before{background-position:-104px -26px}.icons-image-list li .icon-collapse:before{background-position:-130px -26px}.icons-image-list li .icon-expand:before{background-position:-156px -26px}.icons-image-list li .icon-menu:before{background-position:-182px -26px}.icons-image-list li .icon-prev:before{background-position:-208px -26px}.icons-image-list li .icon-next:before{background-position:-234px -26px}.icons-image-list li .icon-settings:before{background-position:-260px -26px}.icons-image-list li .icon-info:before{background-position:-286px -26px}.icons-image-list li .icon-checkmark:before{background-position:0 -52px}.icons-image-list li .icon-calendar:before{background-position:-26px -52px}.icons-image-list li .icon-comment:before{background-position:-52px -52px}.icons-image-list li .icon-comment-reflected:before{background-position:-78px -52px}.icons-image-list li .icon-envelope:before{background-position:-104px -52px}.icons-image-list li .icon-warning:before{background-position:-130px -52px}.icons-image-list li .icon-trash:before{background-position:-156px -52px}.icons-image-list li .icon-flag:before{background-position:-182px -52px}.icons-image-list li .icon-location:before{background-position:-208px -52px}.icons-image-list li .icon-up:before{background-position:-234px -52px}.icons-image-list li .icon-down:before{background-position:-260px -52px}.icons-font-list{list-style:none;padding:0}.icons-font-list li{float:left;width:25%;margin-bottom:35px;text-align:center}.icons-font-list li>span{display:inline-block;text-decoration:none}.icons-font-list li>span:before{-webkit-font-smoothing:antialiased;font-size:34px;line-height:inherit;color:inherit;font-family:'icons-blank-theme';vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.icons-font-list li>span:before{content:attr(data-icon);margin:0 auto;display:block}.loader{background-color:rgba(255,255,255,.5);z-index:9999;bottom:0;left:0;position:fixed;right:0;top:0}.loader:before{background:transparent url('images/loader-2.gif') no-repeat 50% 50%;border-radius:5px;height:160px;width:160px;bottom:0;box-sizing:border-box;content:'';left:0;margin:auto;position:absolute;right:0;top:0}.loading{position:relative}.loading:before{background:rgba(255,255,255,.5) url('images/loader-2.gif') no-repeat 50% 50%;bottom:0;content:'';left:0;position:absolute;right:0;top:0}.example-message-info{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#fdf0d5;color:#6f4400}.example-message-info a{color:#1979c3}.example-message-info a:hover{color:#006bb4}.example-message-info a:active{color:#006bb4}.example-message-warning{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#fdf0d5;color:#6f4400}.example-message-warning a{color:#1979c3}.example-message-warning a:hover{color:#006bb4}.example-message-warning a:active{color:#006bb4}.example-message-error{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#fae5e5;color:#e02b27}.example-message-error a{color:#1979c3}.example-message-error a:hover{color:#006bb4}.example-message-error a:active{color:#006bb4}.example-message-success{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#e5efe5;color:#006400}.example-message-success a{color:#1979c3}.example-message-success a:hover{color:#006bb4}.example-message-success a:active{color:#006bb4}.example-message-notice{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#fdf0d5;color:#6f4400}.example-message-notice a{color:#1979c3}.example-message-notice a:hover{color:#006bb4}.example-message-notice a:active{color:#006bb4}.example-message-1{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#fdf0d5;color:#6f4400;padding-left:40px;position:relative}.example-message-1 a{color:#1979c3}.example-message-1 a:hover{color:#006bb4}.example-message-1 a:active{color:#006bb4}.example-message-1>:first-child:before{-webkit-font-smoothing:antialiased;font-size:28px;line-height:28px;color:#c07600;content:'\e602';font-family:'icons-blank-theme';margin:-14px 0 0;vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;left:0;top:18px;width:40px;position:absolute;text-align:center}.example-message-2{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#fae5e5;color:#e02b27;position:relative;padding-right:40px}.example-message-2 a{color:#1979c3}.example-message-2 a:hover{color:#006bb4}.example-message-2 a:active{color:#006bb4}.example-message-2:before{background:#b30000;width:30px;content:'';display:block;height:100%;padding:0;position:absolute;text-align:center;top:0}.example-message-2>:first-child:before{margin-top:-5px;content:'';overflow:hidden;position:absolute;top:50%}.example-message-2>:first-child:after{-webkit-font-smoothing:antialiased;font-size:28px;line-height:28px;color:#fff;content:'\e602';font-family:'icons-blank-theme';margin:-14px 0 0;vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;left:0;top:18px;width:30px;position:absolute;text-align:center}.example-message-2:before{right:0}.example-message-2>:first-child:before{border:5px solid transparent;height:0;width:0;border-right-color:#b30000;right:30px}.example-message-2>:first-child:after{right:0}.example-message-3{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#e5efe5;color:#006400;position:relative;padding-left:40px}.example-message-3 a{color:#1979c3}.example-message-3 a:hover{color:#006bb4}.example-message-3 a:active{color:#006bb4}.example-message-3:before{background:#006400;width:30px;content:'';display:block;height:100%;padding:0;position:absolute;text-align:center;top:0}.example-message-3>:first-child:before{margin-top:-5px;content:'';overflow:hidden;position:absolute;top:50%}.example-message-3>:first-child:after{-webkit-font-smoothing:antialiased;font-size:28px;line-height:28px;color:#fff;content:'\e610';font-family:'icons-blank-theme';margin:-14px 0 0;vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;left:0;top:18px;width:30px;position:absolute;text-align:center}.example-message-3:before{left:0}.example-message-3>:first-child:before{border:5px solid transparent;height:0;width:0;border-left-color:#006400;left:30px}.example-message-3>:first-child:after{left:0}.example-message-4{margin:0 0 10px;padding:10px 20px;display:block;line-height:1.2em;font-size:1.3rem;background:#fc0;border-color:#ffa500;color:#000;position:relative;padding-left:40px;border-width:4px;border-radius:10px}.example-message-4 a{color:#00f}.example-message-4 a:hover{color:#009}.example-message-4 a:active{color:#006}.example-message-4:before{background:#green;width:30px;content:'';display:block;height:100%;padding:0;position:absolute;text-align:center;top:0}.example-message-4>:first-child:before{margin-top:-5px;content:'';overflow:hidden;position:absolute;top:50%}.example-message-4>:first-child:after{-webkit-font-smoothing:antialiased;font-size:28px;line-height:28px;color:#000;content:'\e606';font-family:'icons-blank-theme';margin:-14px 0 0;vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;left:0;top:15px;width:30px;position:absolute;text-align:center}.example-message-4:before{left:0}.example-message-4>:first-child:before{border:5px solid transparent;height:0;width:0;border-left-color:#green;left:30px}.example-message-4>:first-child:after{left:0}header.header{background-color:rgba(255,0,0,.2)}.column.main{background-color:rgba(255,255,0,.2)}.column.left{background-color:rgba(0,255,255,.2)}.column.right{background-color:rgba(0,0,255,.2)}footer.footer{background-color:rgba(0,0,0,.2)}.columns{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;box-sizing:border-box}.columns:after{clear:both;content:' ';display:block;height:0;overflow:hidden;visibility:hidden}.columns>.column{padding-bottom:40px}@media (min-width: 600px){.page-layout-1column .column.main{ width:100%;-ms-flex-order:2;-webkit-order:2;order:2}.page-layout-3columns .column.main{width:66.66666667%;display:inline-block;-ms-flex-order:2;-webkit-order:2;order:2}.page-layout-2columns-left .column.main{width:83.33333333%;float:right;-ms-flex-order:2;-webkit-order:2;order:2}.page-layout-2columns-right .column.main{width:83.33333333%;float:left;-ms-flex-order:1;-webkit-order:1;order:1}.page-layout-3columns .column.left{width:16.66666667%;float:left;-ms-flex-order:1;-webkit-order:1;order:1}.page-layout-2columns-left .column.left{width:16.66666667%;float:left;-ms-flex-order:1;-webkit-order:1;order:1}.page-layout-2columns-right .column.left{width:16.66666667%;float:left;-ms-flex-order:1;-webkit-order:1;order:1}.page-layout-3columns .column.right{width:16.66666667%;float:right;-ms-flex-order:3;-webkit-order:3;order:3}.page-layout-2columns-left .column.right{width:16.66666667%;float:right;-ms-flex-order:2;-webkit-order:2;order:2}.page-layout-2columns-right .column.right{width:16.66666667%;float:right;-ms-flex-order:2;-webkit-order:2;order:2}}.layout-example-3 .column.main{width:60%;display:inline-block;-ms-flex-order:2;-webkit-order:2;order:2}.layout-example-3 .column.left{width:20%;float:left;-ms-flex-order:1;-webkit-order:1;order:1}.layout-example-3 .column.right{width:20%;float:right;-ms-flex-order:3;-webkit-order:3;order:3}.layout-example-3-1 .column.main{width:60%;float:left;-ms-flex-order:1;-webkit-order:1;order:1}.layout-example-3-1 .column.left{width:20%;display:inline-block;-ms-flex-order:2;-webkit-order:2;order:2}.layout-example-3-1 .column.right{width:20%;float:right;-ms-flex-order:3;-webkit-order:3;order:3}.pages>.label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pages .items{font-size:0;letter-spacing:-1px;line-height:0;white-space:nowrap;margin:0;padding:0;list-style:none none;display:inline-block;font-weight:700}.pages .item{font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px;margin:0 2px 0 0;display:inline-block}.pages .item .label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pages a.page{color:#1979c3;display:inline-block;padding:0 4px;text-decoration:none}.pages a.page:visited{color:#1979c3}.pages a.page:hover{color:#006bb4;text-decoration:none}.pages a.page:active{color:#ff5501}.pages strong.page{font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px;color:#333;display:inline-block;font-weight:700;padding:0 4px}.pages .action{border:1px solid #d1d1d1;color:#7d7d7d;display:inline-block;padding:0;text-decoration:none}.pages .action:visited{color:#7d7d7d}.pages .action:hover{color:#7d7d7d;text-decoration:none}.pages .action:active{color:#7d7d7d}.pages .action.next{display:inline-block;text-decoration:none}.pages .action.next:visited:before{color:#7d7d7d}.pages .action.next:active:before{color:#7d7d7d}.pages .action.next>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pages .action.next:before{-webkit-font-smoothing:antialiased;font-size:46px;line-height:inherit;color:#7d7d7d;content:'\e608';font-family:'icons-blank-theme';margin:0 0 0 -6px;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.pages .action.next:hover:before{color:#7d7d7d}.pages .action.next:active:before{color:#7d7d7d}.pages .action.previous{display:inline-block;text-decoration:none}.pages .action.previous:visited:before{color:#7d7d7d}.pages .action.previous:active:before{color:#7d7d7d}.pages .action.previous>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pages .action.previous:before{-webkit-font-smoothing:antialiased;font-size:46px;line-height:inherit;color:#7d7d7d;content:'\e617';font-family:'icons-blank-theme';margin:0 0 0 -6px;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.pages .action.previous:hover:before{color:#7d7d7d}.pages .action.previous:active:before{color:#7d7d7d}.example-pages-1>.label{display:inline-block;font-weight:700;font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px}.example-pages-1>.label:after{content:':'}.example-pages-1 .items{font-size:0;letter-spacing:-1px;line-height:0;white-space:nowrap;margin:0;padding:0;list-style:none none;display:inline-block;font-weight:700}.example-pages-1 .item{font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px;margin:0 3px;display:inline-block}.example-pages-1 .item .label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-pages-1 a.page{background-color:#ccc;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #f4f4f4 0, #ccc 100%);background-image:linear-gradient(to bottom, #f4f4f4 0, #ccc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#cccccc', GradientType=0);border:1px solid #b3b3b3;color:#333;display:inline-block;padding:0 4px;text-decoration:none}.example-pages-1 a.page:visited{background-color:false;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top,false 0,false 100%);background-image:linear-gradient(to bottom,false 0,false 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='false', endColorstr='false', GradientType=0);color:#1979c3}.example-pages-1 a.page:hover{background-color:#f4f4f4;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #ccc 0, #f4f4f4 100%);background-image:linear-gradient(to bottom, #ccc 0, #f4f4f4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f4f4f4', GradientType=0);border:1px solid #999;color:#333;text-decoration:none}.example-pages-1 a.page:active{background-color:false;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top,false 0,false 100%);background-image:linear-gradient(to bottom,false 0,false 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='false', endColorstr='false', GradientType=0);color:#ff5501}.example-pages-1 strong.page{background:#1979c3;border:1px solid #135d96;font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px;color:#f7b32e;display:inline-block;font-weight:700;padding:0 4px}.example-pages-1 .action{border:1px solid #d1d1d1;color:#7d7d7d;display:inline-block;padding:0;text-decoration:none}.example-pages-1 .action:visited{color:#7d7d7d}.example-pages-1 .action:hover{color:#ff5501;text-decoration:none}.example-pages-1 .action:active{color:#7d7d7d}.example-pages-1 .action.next{display:inline-block;text-decoration:none}.example-pages-1 .action.next:visited:before{color:#7d7d7d}.example-pages-1 .action.next:active:before{color:#7d7d7d}.example-pages-1 .action.next>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-pages-1 .action.next:before{-webkit-font-smoothing:antialiased;font-size:30px;line-height:inherit;color:#7d7d7d;content:'\e608';font-family:'icons-blank-theme';margin:0 0 0 -6px;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-pages-1 .action.next:hover:before{color:#ff5501}.example-pages-1 .action.next:active:before{color:#7d7d7d}.example-pages-1 .action.previous{display:inline-block;text-decoration:none}.example-pages-1 .action.previous:visited:before{color:#7d7d7d}.example-pages-1 .action.previous:active:before{color:#7d7d7d}.example-pages-1 .action.previous>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-pages-1 .action.previous:before{-webkit-font-smoothing:antialiased;font-size:30px;line-height:inherit;color:#7d7d7d;content:'\e617';font-family:'icons-blank-theme';margin:0 0 0 -6px;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-pages-1 .action.previous:hover:before{color:#ff5501}.example-pages-1 .action.previous:active:before{color:#7d7d7d}.example-pages-2>.label{display:inline-block;font-weight:700;font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px}.example-pages-2>.label:after{content:':'}.example-pages-2 .items{font-size:0;letter-spacing:-1px;line-height:0;white-space:nowrap;margin:0;padding:0;list-style:none none;display:inline-block;font-weight:700}.example-pages-2 .item{font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px;margin:0 2px 0 0;display:inline-block}.example-pages-2 .item .label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-pages-2 a.page{color:#1979c3;display:inline-block;padding:0 4px;text-decoration:none}.example-pages-2 a.page:visited{color:#1979c3}.example-pages-2 a.page:hover{color:#006bb4;text-decoration:none}.example-pages-2 a.page:active{color:#ff5501}.example-pages-2 strong.page{font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px;color:#333;display:inline-block;font-weight:700;padding:0 4px}.example-pages-2 .action{border:1px solid #d1d1d1;color:#7d7d7d;display:inline-block;padding:0;text-decoration:none}.example-pages-2 .action:visited{color:#7d7d7d}.example-pages-2 .action:hover{color:#7d7d7d;text-decoration:none}.example-pages-2 .action:active{color:#7d7d7d}.example-pages-3>.label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-pages-3 .items{font-size:0;letter-spacing:-1px;line-height:0;white-space:nowrap;margin:0;padding:0;list-style:none none;display:inline-block;font-weight:700}.example-pages-3 .item{font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px;margin:0 2px 0 0;display:inline-block}.example-pages-3 .item .label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-pages-3 a.page{background:#1979c3;color:#fff;display:inline-block;padding:0 4px;text-decoration:none}.example-pages-3 a.page:visited{background:#1979c3;color:#fff}.example-pages-3 a.page:hover{background:#006bb4;color:#fff;text-decoration:none}.example-pages-3 a.page:active{background:#ff5501;color:#fff}.example-pages-3 strong.page{background:#1979c3;font-size:1.2rem;font-size:12px;letter-spacing:normal;line-height:32px;color:#fff;display:inline-block;font-weight:700;padding:0 4px}.example-pages-3 .action{background:#1979c3;border:1px solid #d1d1d1;color:#fff;display:inline-block;padding:0;text-decoration:none}.example-pages-3 .action:visited{background:#1979c3;color:#7d7d7d}.example-pages-3 .action:hover{background:#006bb4;color:#fff;text-decoration:none}.example-pages-3 .action:active{background:#ff5501;color:#fff}.example-pages-3 .action.next{display:inline-block;text-decoration:none}.example-pages-3 .action.next:visited:before{color:#7d7d7d}.example-pages-3 .action.next:active:before{color:#fff}.example-pages-3 .action.next>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-pages-3 .action.next:before{-webkit-font-smoothing:antialiased;font-size:46px;line-height:inherit;color:#fff;content:'\e608';font-family:'icons-blank-theme';margin:0 0 0 -6px;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-pages-3 .action.next:hover:before{color:#fff}.example-pages-3 .action.next:active:before{color:#fff}.example-pages-3 .action.previous{display:inline-block;text-decoration:none}.example-pages-3 .action.previous:visited:before{color:#7d7d7d}.example-pages-3 .action.previous:active:before{color:#fff}.example-pages-3 .action.previous>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-pages-3 .action.previous:before{-webkit-font-smoothing:antialiased;font-size:46px;line-height:inherit;color:#fff;content:'\e617';font-family:'icons-blank-theme';margin:0 0 0 -6px;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.example-pages-3 .action.previous:hover:before{color:#fff}.example-pages-3 .action.previous:active:before{color:#fff}.window.popup.popup-example{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example .popup-actions .action.close>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.window.popup.popup-example .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e616';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example .popup-actions .action.close:hover:before{color:inherit}.window.popup.popup-example .popup-actions .action.close:active:before{color:inherit}.window.popup.popup-example .popup-actions .action.close:focus,.window.popup.popup-example .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example .popup-actions .action.close.disabled,.window.popup.popup-example .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example.active{opacity:1}.window.popup.popup-example-1{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-1 .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example-1 .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example-1 .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example-1 .popup-actions .action.close>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.window.popup.popup-example-1 .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e616';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example-1 .popup-actions .action.close:hover:before{color:inherit}.window.popup.popup-example-1 .popup-actions .action.close:active:before{color:inherit}.window.popup.popup-example-1 .popup-actions .action.close:focus,.window.popup.popup-example-1 .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example-1 .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example-1 .popup-actions .action.close.disabled,.window.popup.popup-example-1 .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example-1 .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example-1.active{opacity:1}.window.overlay{transition:opacity .15s linear;background:#000;z-index:899;bottom:0;left:0;opacity:0;position:fixed;right:0;top:0}.window.overlay.active{opacity:.5;filter:alpha(opacity=50)}.window.popup.popup-example-2{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;overflow-y:auto;max-height:200px;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-2 .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example-2 .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example-2 .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example-2 .popup-actions .action.close>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.window.popup.popup-example-2 .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e616';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example-2 .popup-actions .action.close:hover:before{color:inherit}.window.popup.popup-example-2 .popup-actions .action.close:active:before{color:inherit}.window.popup.popup-example-2 .popup-actions .action.close:focus,.window.popup.popup-example-2 .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example-2 .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example-2 .popup-actions .action.close.disabled,.window.popup.popup-example-2 .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example-2 .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example-2.active{opacity:1}.window.popup.popup-example-3{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-3 .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example-3 .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example-3 .popup-content{overflow-y:auto;max-height:200px}.window.popup.popup-example-3 .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example-3 .popup-actions .action.close>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.window.popup.popup-example-3 .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e616';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example-3 .popup-actions .action.close:hover:before{color:inherit}.window.popup.popup-example-3 .popup-actions .action.close:active:before{color:inherit}.window.popup.popup-example-3 .popup-actions .action.close:focus,.window.popup.popup-example-3 .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example-3 .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example-3 .popup-actions .action.close.disabled,.window.popup.popup-example-3 .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example-3 .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example-3.active{opacity:1}.window.popup.popup-example-4{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-4 .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example-4 .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example-4 .popup-content{margin:0 0 20px}.window.popup.popup-example-4 .popup-footer{margin:0 20px}.window.popup.popup-example-4 .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example-4 .popup-actions .action.close>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.window.popup.popup-example-4 .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e616';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example-4 .popup-actions .action.close:hover:before{color:inherit}.window.popup.popup-example-4 .popup-actions .action.close:active:before{color:inherit}.window.popup.popup-example-4 .popup-actions .action.close:focus,.window.popup.popup-example-4 .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example-4 .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example-4 .popup-actions .action.close.disabled,.window.popup.popup-example-4 .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example-4 .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example-4.active{opacity:1}.window.popup.popup-example-5{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-5 .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example-5 .popup-header .title{font-weight:300;line-height:1.1;font-size:2.6rem;margin-top:0rem;margin-bottom:2rem}.window.popup.popup-example-5 .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example-5 .popup-actions .action.close>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.window.popup.popup-example-5 .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e616';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example-5 .popup-actions .action.close:hover:before{color:inherit}.window.popup.popup-example-5 .popup-actions .action.close:active:before{color:inherit}.window.popup.popup-example-5 .popup-actions .action.close:focus,.window.popup.popup-example-5 .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example-5 .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example-5 .popup-actions .action.close.disabled,.window.popup.popup-example-5 .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example-5 .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example-5.active{opacity:1}.window.popup.popup-example-6{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-6 .popup-footer .actions.toolbar{text-align:left}.window.popup.popup-example-6 .popup-footer .actions.toolbar:before,.window.popup.popup-example-6 .popup-footer .actions.toolbar:after{content:'';display:table}.window.popup.popup-example-6 .popup-footer .actions.toolbar:after{clear:both}.window.popup.popup-example-6 .popup-footer .actions.toolbar .secondary{float:left}.window.popup.popup-example-6 .popup-footer .actions.toolbar .primary,.window.popup.popup-example-6 .popup-footer .actions.toolbar .secondary{display:inline-block}.window.popup.popup-example-6 .popup-footer .actions.toolbar .primary a.action,.window.popup.popup-example-6 .popup-footer .actions.toolbar .secondary a.action{display:inline-block}.window.popup.popup-example-6 .popup-footer .actions.toolbar .primary .action{margin:0 5px 0 0}.window.popup.popup-example-6 .popup-footer .actions.toolbar .secondary a.action{margin-top:6px}.window.popup.popup-example-6 .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example-6 .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example-6 .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example-6 .popup-actions .action.close>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.window.popup.popup-example-6 .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e616';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example-6 .popup-actions .action.close:hover:before{color:inherit}.window.popup.popup-example-6 .popup-actions .action.close:active:before{color:inherit}.window.popup.popup-example-6 .popup-actions .action.close:focus,.window.popup.popup-example-6 .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example-6 .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example-6 .popup-actions .action.close.disabled,.window.popup.popup-example-6 .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example-6 .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example-6.active{opacity:1}.window.popup.popup-example-7{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-7 .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example-7 .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example-7 .popup-actions .action.close{position:absolute;right:10px;top:10px}.window.popup.popup-example-7.active{opacity:1}.window.popup.popup-example-8{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-8 .popup-header{margin:0 0 25px;padding-right:30px}.window.popup.popup-example-8 .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example-8 .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example-8 .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:30px;line-height:22px;color:red;content:'\e613';font-family:'icons-blank-theme';margin:0;vertical-align:middle;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example-8 .popup-actions .action.close:hover:before{color:#090}.window.popup.popup-example-8 .popup-actions .action.close:active:before{color:#00f}.window.popup.popup-example-8 .popup-actions .action.close:focus,.window.popup.popup-example-8 .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example-8 .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example-8 .popup-actions .action.close.disabled,.window.popup.popup-example-8 .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example-8 .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example-8.active{opacity:1}.window.popup.popup-example-9{background:#fff;border:1px solid #aeaeae;padding:22px;width:100%;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:opacity .3s linear;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1001;display:none;opacity:0}.window.popup.popup-example-9 .popup-header{margin:0 0 25px;padding-right:22px}.window.popup.popup-example-9 .popup-header .title{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}.window.popup.popup-example-9 .popup-actions .action.close{position:absolute;display:inline-block;background-image:none;background:0;-moz-box-sizing:content-box;border:0;box-shadow:none;line-height:inherit;margin:0;padding:0;text-decoration:none;text-shadow:none;font-weight:400;right:10px;top:10px}.window.popup.popup-example-9 .popup-actions .action.close>span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.window.popup.popup-example-9 .popup-actions .action.close:before{-webkit-font-smoothing:antialiased;font-size:22px;line-height:22px;color:inherit;content:'\e616';font-family:'icons-blank-theme';margin:0;vertical-align:top;display:inline-block;font-weight:400;overflow:hidden;speak:none;text-align:center}.window.popup.popup-example-9 .popup-actions .action.close:hover:before{color:inherit}.window.popup.popup-example-9 .popup-actions .action.close:active:before{color:inherit}.window.popup.popup-example-9 .popup-actions .action.close:focus,.window.popup.popup-example-9 .popup-actions .action.close:active{background:0;border:0}.window.popup.popup-example-9 .popup-actions .action.close:hover{background:0;border:0}.window.popup.popup-example-9 .popup-actions .action.close.disabled,.window.popup.popup-example-9 .popup-actions .action.close[disabled],fieldset[disabled] .window.popup.popup-example-9 .popup-actions .action.close{cursor:not-allowed;pointer-events:none;opacity:.5}.window.popup.popup-example-9.active{opacity:1}.window.overlay.example-overlay-1.active{transition:opacity .15s linear;background:#0f5293;z-index:899;bottom:0;left:0;opacity:0;position:fixed;right:0;top:0}.window.overlay.example-overlay-1.active.active{opacity:.8;filter:alpha(opacity=80)}.example-ratings-1{overflow:hidden}.example-ratings-1:before{color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;position:absolute;z-index:1}.example-ratings-1 input[type="radio"]{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-ratings-1 input[type="radio"]:focus+label:before,.example-ratings-1 input[type="radio"]:checked+label:before{opacity:1}.example-ratings-1 label{cursor:pointer;display:block;position:absolute}.example-ratings-1 label span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-ratings-1 label:before{color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;opacity:0}.example-ratings-1 label:hover:before{opacity:1}.example-ratings-1 label:hover~label:before{opacity:0}.example-ratings-1 .rating-5{z-index:2}.example-ratings-1 .rating-5:before{content:'\e605' '\e605' '\e605' '\e605' '\e605'}.example-ratings-1 .rating-4{z-index:3}.example-ratings-1 .rating-4:before{content:'\e605' '\e605' '\e605' '\e605'}.example-ratings-1 .rating-3{z-index:4}.example-ratings-1 .rating-3:before{content:'\e605' '\e605' '\e605'}.example-ratings-1 .rating-2{z-index:5}.example-ratings-1 .rating-2:before{content:'\e605' '\e605'}.example-ratings-1 .rating-1{z-index:6}.example-ratings-1 .rating-1:before{content:'\e605'}.example-ratings-2{overflow:hidden}.example-ratings-2:before{color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;content:'\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605';display:block;position:absolute;z-index:1}.example-ratings-2 input[type="radio"]{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-ratings-2 input[type="radio"]:focus+label:before,.example-ratings-2 input[type="radio"]:checked+label:before{opacity:1}.example-ratings-2 label{cursor:pointer;display:block;position:absolute}.example-ratings-2 label span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-ratings-2 label:before{color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;opacity:0}.example-ratings-2 label:hover:before{opacity:1}.example-ratings-2 label:hover~label:before{opacity:0}.example-ratings-2 .rating-8{z-index:2}.example-ratings-2 .rating-8:before{content:'\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605'}.example-ratings-2 .rating-7{z-index:3}.example-ratings-2 .rating-7:before{content:'\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605'}.example-ratings-2 .rating-6{z-index:4}.example-ratings-2 .rating-6:before{content:'\e605' '\e605' '\e605' '\e605' '\e605' '\e605'}.example-ratings-2 .rating-5{z-index:5}.example-ratings-2 .rating-5:before{content:'\e605' '\e605' '\e605' '\e605' '\e605'}.example-ratings-2 .rating-4{z-index:6}.example-ratings-2 .rating-4:before{content:'\e605' '\e605' '\e605' '\e605'}.example-ratings-2 .rating-3{z-index:7}.example-ratings-2 .rating-3:before{content:'\e605' '\e605' '\e605'}.example-ratings-2 .rating-2{z-index:8}.example-ratings-2 .rating-2:before{content:'\e605' '\e605'}.example-ratings-2 .rating-1{z-index:9}.example-ratings-2 .rating-1:before{content:'\e605'}.example-ratings-3{overflow:hidden}.example-ratings-3:before{color:#aff5e3;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;position:absolute;z-index:1}.example-ratings-3 input[type="radio"]{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-ratings-3 input[type="radio"]:focus+label:before,.example-ratings-3 input[type="radio"]:checked+label:before{opacity:1}.example-ratings-3 label{cursor:pointer;display:block;position:absolute}.example-ratings-3 label span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-ratings-3 label:before{color:#0a6767;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;opacity:0}.example-ratings-3 label:hover:before{opacity:1}.example-ratings-3 label:hover~label:before{opacity:0}.example-ratings-3 .rating-5{z-index:2}.example-ratings-3 .rating-5:before{content:'\e605' '\e605' '\e605' '\e605' '\e605'}.example-ratings-3 .rating-4{z-index:3}.example-ratings-3 .rating-4:before{content:'\e605' '\e605' '\e605' '\e605'}.example-ratings-3 .rating-3{z-index:4}.example-ratings-3 .rating-3:before{content:'\e605' '\e605' '\e605'}.example-ratings-3 .rating-2{z-index:5}.example-ratings-3 .rating-2:before{content:'\e605' '\e605'}.example-ratings-3 .rating-1{z-index:6}.example-ratings-3 .rating-1:before{content:'\e605'}.example-ratings-4{overflow:hidden}.example-ratings-4:before{color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;content:'\e600' '\e600' '\e600' '\e600' '\e600';display:block;position:absolute;z-index:1}.example-ratings-4 input[type="radio"]{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-ratings-4 input[type="radio"]:focus+label:before,.example-ratings-4 input[type="radio"]:checked+label:before{opacity:1}.example-ratings-4 label{cursor:pointer;display:block;position:absolute}.example-ratings-4 label span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-ratings-4 label:before{color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;opacity:0}.example-ratings-4 label:hover:before{opacity:1}.example-ratings-4 label:hover~label:before{opacity:0}.example-ratings-4 .rating-5{z-index:2}.example-ratings-4 .rating-5:before{content:'\e600' '\e600' '\e600' '\e600' '\e600'}.example-ratings-4 .rating-4{z-index:3}.example-ratings-4 .rating-4:before{content:'\e600' '\e600' '\e600' '\e600'}.example-ratings-4 .rating-3{z-index:4}.example-ratings-4 .rating-3:before{content:'\e600' '\e600' '\e600'}.example-ratings-4 .rating-2{z-index:5}.example-ratings-4 .rating-2:before{content:'\e600' '\e600'}.example-ratings-4 .rating-1{z-index:6}.example-ratings-4 .rating-1:before{content:'\e600'}.exapmle-ratings-5 .control.rating.vote{overflow:hidden}.exapmle-ratings-5 .control.rating.vote:before{color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;position:absolute;z-index:1}.exapmle-ratings-5 .control.rating.vote input[type="radio"]{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.exapmle-ratings-5 .control.rating.vote input[type="radio"]:focus+label:before,.exapmle-ratings-5 .control.rating.vote input[type="radio"]:checked+label:before{opacity:1}.exapmle-ratings-5 .control.rating.vote label{cursor:pointer;display:block;position:absolute}.exapmle-ratings-5 .control.rating.vote label span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.exapmle-ratings-5 .control.rating.vote label:before{color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;font-style:normal;font-weight:400;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;opacity:0}.exapmle-ratings-5 .control.rating.vote label:hover:before{opacity:1}.exapmle-ratings-5 .control.rating.vote label:hover~label:before{opacity:0}.exapmle-ratings-5 .control.rating.vote .rating-5{z-index:2}.exapmle-ratings-5 .control.rating.vote .rating-5:before{content:'\e605' '\e605' '\e605' '\e605' '\e605'}.exapmle-ratings-5 .control.rating.vote .rating-4{z-index:3}.exapmle-ratings-5 .control.rating.vote .rating-4:before{content:'\e605' '\e605' '\e605' '\e605'}.exapmle-ratings-5 .control.rating.vote .rating-3{z-index:4}.exapmle-ratings-5 .control.rating.vote .rating-3:before{content:'\e605' '\e605' '\e605'}.exapmle-ratings-5 .control.rating.vote .rating-2{z-index:5}.exapmle-ratings-5 .control.rating.vote .rating-2:before{content:'\e605' '\e605'}.exapmle-ratings-5 .control.rating.vote .rating-1{z-index:6}.exapmle-ratings-5 .control.rating.vote .rating-1:before{content:'\e605'}.example-rating-summary-1{overflow:hidden;white-space:nowrap}.example-rating-summary-1 .rating-result{width:100px;display:inline-block;position:relative;vertical-align:middle}.example-rating-summary-1 .rating-result:before{left:0;position:absolute;top:0;width:100%;z-index:1;-webkit-font-smoothing:antialiased;color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-1 .rating-result>span{display:block;overflow:hidden}.example-rating-summary-1 .rating-result>span:before{position:relative;z-index:2;-webkit-font-smoothing:antialiased;color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-1 .rating-result>span span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-rating-summary-2{overflow:hidden;white-space:nowrap}.example-rating-summary-2 .rating-result{width:154px;display:inline-block;position:relative;vertical-align:middle}.example-rating-summary-2 .rating-result:before{left:0;position:absolute;top:0;width:100%;z-index:1;-webkit-font-smoothing:antialiased;color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-2 .rating-result>span{display:block;overflow:hidden}.example-rating-summary-2 .rating-result>span:before{position:relative;z-index:2;-webkit-font-smoothing:antialiased;color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-2 .rating-result>span span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-rating-summary-3{overflow:hidden;white-space:nowrap}.example-rating-summary-3 .rating-result{width:100px;display:inline-block;position:relative;vertical-align:middle}.example-rating-summary-3 .rating-result:before{left:0;position:absolute;top:0;width:100%;z-index:1;-webkit-font-smoothing:antialiased;color:#aff5e3;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-3 .rating-result>span{display:block;overflow:hidden}.example-rating-summary-3 .rating-result>span:before{position:relative;z-index:2;-webkit-font-smoothing:antialiased;color:#0a6767;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-3 .rating-result>span span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-rating-summary-4{overflow:hidden;white-space:nowrap}.example-rating-summary-4 .rating-result{width:100px;display:inline-block;position:relative;vertical-align:middle}.example-rating-summary-4 .rating-result:before{left:0;position:absolute;top:0;width:100%;z-index:1;-webkit-font-smoothing:antialiased;color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e600' '\e600' '\e600' '\e600' '\e600';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-4 .rating-result>span{display:block;overflow:hidden}.example-rating-summary-4 .rating-result>span:before{position:relative;z-index:2;-webkit-font-smoothing:antialiased;color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e600' '\e600' '\e600' '\e600' '\e600';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-4 .rating-result>span span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-rating-summary-5{overflow:hidden;white-space:nowrap}.example-rating-summary-5 .label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-rating-summary-5 .rating-result{width:100px;display:inline-block;position:relative;vertical-align:middle}.example-rating-summary-5 .rating-result:before{left:0;position:absolute;top:0;width:100%;z-index:1;-webkit-font-smoothing:antialiased;color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-5 .rating-result>span{display:block;overflow:hidden}.example-rating-summary-5 .rating-result>span:before{position:relative;z-index:2;-webkit-font-smoothing:antialiased;color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-5 .rating-result>span span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-rating-summary-6 .rating-summary{overflow:hidden;white-space:nowrap}.example-rating-summary-6 .rating-summary .rating-result{width:100px;display:inline-block;position:relative;vertical-align:middle}.example-rating-summary-6 .rating-summary .rating-result:before{left:0;position:absolute;top:0;width:100%;z-index:1;-webkit-font-smoothing:antialiased;color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-6 .rating-summary .rating-result>span{display:block;overflow:hidden}.example-rating-summary-6 .rating-summary .rating-result>span:before{position:relative;z-index:2;-webkit-font-smoothing:antialiased;color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-6 .rating-summary .rating-result>span span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-rating-summary-7{overflow:hidden;white-space:nowrap}.example-rating-summary-7 .rating-result{width:100px;display:inline-block;position:relative;vertical-align:middle}.example-rating-summary-7 .rating-result:before{left:0;position:absolute;top:0;width:100%;z-index:1;-webkit-font-smoothing:antialiased;color:#c7c7c7;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-7 .rating-result>span{display:block;overflow:hidden}.example-rating-summary-7 .rating-result>span:before{position:relative;z-index:2;-webkit-font-smoothing:antialiased;color:#ff5501;font-family:'icons-blank-theme';font-size:28px;height:28px;letter-spacing:-10px;line-height:28px;content:'\e605' '\e605' '\e605' '\e605' '\e605';display:block;font-style:normal;font-weight:400;speak:none}.example-rating-summary-7 .rating-result>span span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-rating-summary-7 .label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-responsive-block{padding:10px}.example-sections-1{position:relative;z-index:1}.example-sections-1:before,.example-sections-1:after{content:'';display:table}.example-sections-1:after{clear:both}.example-sections-1>.item.title{float:left;width:auto}.example-sections-1>.item.title>.switch{height:20px;display:block;position:relative;z-index:2}.example-sections-1>.item.content{margin-top:20px;box-sizing:border-box;float:right;margin-left:-100%;width:100%}.example-sections-1>.item.content:before,.example-sections-1>.item.content:after{content:'';display:table}.example-sections-1>.item.content:after{clear:both}.example-sections-1>.item.content.active{display:block}.example-sections-1>.item.title{margin:0 5px 0 0}.example-sections-1>.item.title>.switch{font-weight:600;line-height:20px;font-size:1.4rem;color:#7d7d7d;text-decoration:none;background:#f0f0f0;border:1px solid #d1d1d1;border-bottom:0;height:20px;padding:5px 20px 5px 20px}.example-sections-1>.item.title>.switch:visited{color:#7d7d7d;text-decoration:none}.example-sections-1>.item.title>.switch:hover{color:#7d7d7d;text-decoration:none}.example-sections-1>.item.title>.switch:active{color:#333;text-decoration:none}.example-sections-1>.item.title:not(.disabled)>.switch:focus,.example-sections-1>.item.title:not(.disabled)>.switch:hover{background:#fcfcfc}.example-sections-1>.item.title:not(.disabled)>.switch:active,.example-sections-1>.item.title.active>.switch,.example-sections-1>.item.title.active>.switch:focus,.example-sections-1>.item.title.active>.switch:hover{background:#fff;color:#333}.example-sections-1>.item.title.active>.switch,.example-sections-1>.item.title.active>.switch:focus,.example-sections-1>.item.title.active>.switch:hover{padding-bottom:6px}.example-sections-1>.item.content{background:#fff;margin-top:31px;padding:20px 20px 20px 20px;border:1px solid #d1d1d1}.example-sections-2{position:relative;z-index:1}.example-sections-2:before,.example-sections-2:after{content:'';display:table}.example-sections-2:after{clear:both}.example-sections-2>.item.title{float:left;width:auto}.example-sections-2>.item.title>.switch{height:20px;display:block;position:relative;z-index:2}.example-sections-2>.item.content{margin-top:20px;box-sizing:border-box;float:right;margin-left:-100%;width:100%}.example-sections-2>.item.content:before,.example-sections-2>.item.content:after{content:'';display:table}.example-sections-2>.item.content:after{clear:both}.example-sections-2>.item.content.active{display:block}.example-sections-2>.item.title{margin:0 5px 0 0}.example-sections-2>.item.title>.switch{font-weight:600;line-height:20px;font-size:1.4rem;color:#7d7d7d;text-decoration:none;background:#f0f0f0;border:1px solid #d1d1d1;border-bottom:0;height:20px;padding:5px 20px 5px 20px}.example-sections-2>.item.title>.switch:visited{color:#7d7d7d;text-decoration:none}.example-sections-2>.item.title>.switch:hover{color:#7d7d7d;text-decoration:none}.example-sections-2>.item.title>.switch:active{color:#333;text-decoration:none}.example-sections-2>.item.title:not(.disabled)>.switch:focus,.example-sections-2>.item.title:not(.disabled)>.switch:hover{background:#fcfcfc}.example-sections-2>.item.title:not(.disabled)>.switch:active,.example-sections-2>.item.title.active>.switch,.example-sections-2>.item.title.active>.switch:focus,.example-sections-2>.item.title.active>.switch:hover{background:#fff;color:#333}.example-sections-2>.item.title.active>.switch,.example-sections-2>.item.title.active>.switch:focus,.example-sections-2>.item.title.active>.switch:hover{padding-bottom:6px}.example-sections-2>.item.content{background:#fff;margin-top:31px;padding:20px 20px 20px 20px;border:0;border-top:1px solid #d1d1d1}.example-sections-3{margin:0;padding:0}.example-sections-3>.item.title{box-sizing:border-box;float:none;width:100%}.example-sections-3>.item.title>.switch{display:block}.example-sections-3>.item.content{box-sizing:border-box;display:block;float:none;margin:0}.example-sections-3>.item.content:before,.example-sections-3>.item.content:after{content:'';display:table}.example-sections-3>.item.content:after{clear:both}.example-sections-3>.item.content.active{display:block}.example-sections-3>.item.title{margin:0 0 5px}.example-sections-3>.item.title>.switch{background:#f0f0f0;border-bottom:1px solid #d1d1d1;border-left:1px solid #d1d1d1;border-right:1px solid #d1d1d1;border-top:1px solid #d1d1d1;height:40px;padding:5px 20px 5px 20px;font-weight:600;line-height:40px;font-size:1.8rem;color:#7d7d7d;text-decoration:none}.example-sections-3>.item.title>.switch:visited{color:#7d7d7d;text-decoration:none}.example-sections-3>.item.title>.switch:hover{color:#7d7d7d;text-decoration:none}.example-sections-3>.item.title>.switch:active{color:#333;text-decoration:none}.example-sections-3>.item.title:not(.disabled)>.switch:focus,.example-sections-3>.item.title:not(.disabled)>.switch:hover{background:#fcfcfc}.example-sections-3>.item.title:not(.disabled)>.switch:active,.example-sections-3>.item.title.active>.switch,.example-sections-3>.item.title.active>.switch:focus,.example-sections-3>.item.title.active>.switch:hover{background:#fff;padding-bottom:5px}.example-sections-3>.item.content{background:#fff;border:1px solid #d1d1d1;margin:0 0 5px;padding:20px 20px 20px 20px}@media only screen and (max-width: 99999px){.example-sections-4{ position:relative;z-index:1}.example-sections-4:before,.example-sections-4:after{content:'';display:table}.example-sections-4:after{clear:both}.example-sections-4>.item.title{float:left;width:auto}.example-sections-4>.item.title>.switch{height:20px;display:block;position:relative;z-index:2}.example-sections-4>.item.content{margin-top:20px;box-sizing:border-box;float:right;margin-left:-100%;width:100%}.example-sections-4>.item.content:before,.example-sections-4>.item.content:after{content:'';display:table}.example-sections-4>.item.content:after{clear:both}.example-sections-4>.item.content.active{display:block}.example-sections-4>.item.title{margin:0 5px 0 0}.example-sections-4>.item.title>.switch{font-weight:600;line-height:20px;font-size:1.4rem;color:#7d7d7d;text-decoration:none;background:#f0f0f0;border:1px solid #d1d1d1;border-bottom:0;height:20px;padding:5px 20px 5px 20px}.example-sections-4>.item.title>.switch:visited{color:#7d7d7d;text-decoration:none}.example-sections-4>.item.title>.switch:hover{color:#7d7d7d;text-decoration:none}.example-sections-4>.item.title>.switch:active{color:#333;text-decoration:none}.example-sections-4>.item.title:not(.disabled)>.switch:focus,.example-sections-4>.item.title:not(.disabled)>.switch:hover{background:#fcfcfc}.example-sections-4>.item.title:not(.disabled)>.switch:active,.example-sections-4>.item.title.active>.switch,.example-sections-4>.item.title.active>.switch:focus,.example-sections-4>.item.title.active>.switch:hover{background:#fff;color:#333}.example-sections-4>.item.title.active>.switch,.example-sections-4>.item.title.active>.switch:focus,.example-sections-4>.item.title.active>.switch:hover{padding-bottom:6px}.example-sections-4>.item.content{background:#fff;margin-top:31px;padding:20px 20px 20px 20px;border:1px solid #d1d1d1}}@media only screen and (max-width: 768px){.example-sections-4{ margin:0;padding:0}.example-sections-4>.item.title{box-sizing:border-box;float:none;width:100%}.example-sections-4>.item.title>.switch{display:block}.example-sections-4>.item.content{box-sizing:border-box;display:block;float:none;margin:0}.example-sections-4>.item.content:before,.example-sections-4>.item.content:after{content:'';display:table}.example-sections-4>.item.content:after{clear:both}.example-sections-4>.item.content.active{display:block}.example-sections-4>.item.title{margin:0 0 5px}.example-sections-4>.item.title>.switch{background:#f0f0f0;border-bottom:1px solid #d1d1d1;border-left:1px solid #d1d1d1;border-right:1px solid #d1d1d1;border-top:1px solid #d1d1d1;height:40px;padding:5px 20px 5px 20px;font-weight:600;line-height:40px;font-size:1.8rem;color:#7d7d7d;text-decoration:none}.example-sections-4>.item.title>.switch:visited{color:#7d7d7d;text-decoration:none}.example-sections-4>.item.title>.switch:hover{color:#7d7d7d;text-decoration:none}.example-sections-4>.item.title>.switch:active{color:#333;text-decoration:none}.example-sections-4>.item.title:not(.disabled)>.switch:focus,.example-sections-4>.item.title:not(.disabled)>.switch:hover{background:#fcfcfc}.example-sections-4>.item.title:not(.disabled)>.switch:active,.example-sections-4>.item.title.active>.switch,.example-sections-4>.item.title.active>.switch:focus,.example-sections-4>.item.title.active>.switch:hover{background:#fff;padding-bottom:5px}.example-sections-4>.item.content{background:#fff;border:1px solid #d1d1d1;margin:0 0 5px;padding:20px 20px 20px 20px}}.example-sections-5{position:relative;z-index:1}.example-sections-5:before,.example-sections-5:after{content:'';display:table}.example-sections-5:after{clear:both}.example-sections-5>.item.title{float:left;width:auto}.example-sections-5>.item.title>.switch{height:20px;display:block;position:relative;z-index:2}.example-sections-5>.item.content{margin-top:20px;box-sizing:border-box;float:right;margin-left:-100%;width:100%}.example-sections-5>.item.content:before,.example-sections-5>.item.content:after{content:'';display:table}.example-sections-5>.item.content:after{clear:both}.example-sections-5>.item.content.active{display:block}.example-sections-6{margin:0;padding:0}.example-sections-6>.item.title{box-sizing:border-box;float:none;width:100%}.example-sections-6>.item.title>.switch{display:block}.example-sections-6>.item.content{box-sizing:border-box;display:block;float:none;margin:0}.example-sections-6>.item.content:before,.example-sections-6>.item.content:after{content:'';display:table}.example-sections-6>.item.content:after{clear:both}.example-sections-6>.item.content.active{display:block}.example-table-1{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%}.example-table-1 th{text-align:left}.example-table-1>tbody>tr>th,.example-table-1>tfoot>tr>th,.example-table-1>tbody>tr>td,.example-table-1>tfoot>tr>td{vertical-align:top}.example-table-1>thead>tr>th,.example-table-1>thead>tr>td{vertical-align:bottom}.example-table-1>thead>tr>th,.example-table-1>tbody>tr>th,.example-table-1>tfoot>tr>th,.example-table-1>thead>tr>td,.example-table-1>tbody>tr>td,.example-table-1>tfoot>tr>td{padding:8px 10px}.example-table-2>thead>tr>th,.example-table-2>tbody>tr>th,.example-table-2>tfoot>tr>th{color:#111;font-weight:700}.example-table-3{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%}.example-table-3 th{text-align:left}.example-table-3>tbody>tr>th,.example-table-3>tfoot>tr>th,.example-table-3>tbody>tr>td,.example-table-3>tfoot>tr>td{vertical-align:top}.example-table-3>thead>tr>th,.example-table-3>thead>tr>td{vertical-align:bottom}.example-table-3>thead>tr>th,.example-table-3>tbody>tr>th,.example-table-3>tfoot>tr>th,.example-table-3>thead>tr>td,.example-table-3>tbody>tr>td,.example-table-3>tfoot>tr>td{padding:8px 10px}.example-table-3>caption{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-table-4{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%}.example-table-4 th{text-align:left}.example-table-4>tbody>tr>th,.example-table-4>tfoot>tr>th,.example-table-4>tbody>tr>td,.example-table-4>tfoot>tr>td{vertical-align:top}.example-table-4>thead>tr>th,.example-table-4>thead>tr>td{vertical-align:bottom}.example-table-4>thead>tr>th,.example-table-4>tbody>tr>th,.example-table-4>tfoot>tr>th,.example-table-4>thead>tr>td,.example-table-4>tbody>tr>td,.example-table-4>tfoot>tr>td{padding:8px 10px}.example-table-4>thead>tr>td,.example-table-4>tbody>tr>td,.example-table-4>tfoot>tr>td{padding:15px 25px 5px 0}.example-table-4>thead>tr>th,.example-table-4>tbody>tr>th,.example-table-4>tfoot>tr>th{padding:15px 25px 10px 0}.example-table-5{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%;background:#fff}.example-table-5 th{text-align:left}.example-table-5>tbody>tr>th,.example-table-5>tfoot>tr>th,.example-table-5>tbody>tr>td,.example-table-5>tfoot>tr>td{vertical-align:top}.example-table-5>thead>tr>th,.example-table-5>thead>tr>td{vertical-align:bottom}.example-table-5>thead>tr>th,.example-table-5>tbody>tr>th,.example-table-5>tfoot>tr>th,.example-table-5>thead>tr>td,.example-table-5>tbody>tr>td,.example-table-5>tfoot>tr>td{padding:8px 10px}.example-table-5>thead{background:#ccf}.example-table-5>tfoot{background:#cff}.example-table-5>tbody>tr>td{background:#fcc}.example-table-5>tbody>tr>th{background:#ffc}.example-table-6{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%;border:1px solid #d1d1d1}.example-table-6 th{text-align:left}.example-table-6>tbody>tr>th,.example-table-6>tfoot>tr>th,.example-table-6>tbody>tr>td,.example-table-6>tfoot>tr>td{vertical-align:top}.example-table-6>thead>tr>th,.example-table-6>thead>tr>td{vertical-align:bottom}.example-table-6>thead>tr>th,.example-table-6>tbody>tr>th,.example-table-6>tfoot>tr>th,.example-table-6>thead>tr>td,.example-table-6>tbody>tr>td,.example-table-6>tfoot>tr>td{padding:8px 10px}.example-table-6>thead>tr>th,.example-table-6>tbody>tr>th,.example-table-6>tfoot>tr>th,.example-table-6>thead>tr>td,.example-table-6>tbody>tr>td,.example-table-6>tfoot>tr>td{border:1px solid #d1d1d1}.example-table-7{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%}.example-table-7 th{text-align:left}.example-table-7>tbody>tr>th,.example-table-7>tfoot>tr>th,.example-table-7>tbody>tr>td,.example-table-7>tfoot>tr>td{vertical-align:top}.example-table-7>thead>tr>th,.example-table-7>thead>tr>td{vertical-align:bottom}.example-table-7>thead>tr>th,.example-table-7>tbody>tr>th,.example-table-7>tfoot>tr>th,.example-table-7>thead>tr>td,.example-table-7>tbody>tr>td,.example-table-7>tfoot>tr>td{padding:8px 10px}.example-table-7>thead>tr>th,.example-table-7>tbody>tr>th,.example-table-7>tfoot>tr>th,.example-table-7>thead>tr>td,.example-table-7>tbody>tr>td,.example-table-7>tfoot>tr>td{border-top:1px solid #d1d1d1}.example-table-7>caption+thead>tr:first-child>th,.example-table-7>colgroup+thead>tr:first-child>th,.example-table-7>thead:first-child>tr:first-child>th,.example-table-7>caption+thead>tr:first-child>td,.example-table-7>colgroup+thead>tr:first-child>td,.example-table-7>thead:first-child>tr:first-child>td{border-top:0}.example-table-7>tbody+tbody{border-top:1px solid #d1d1d1}.example-table-8{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%}.example-table-8 th{text-align:left}.example-table-8>tbody>tr>th,.example-table-8>tfoot>tr>th,.example-table-8>tbody>tr>td,.example-table-8>tfoot>tr>td{vertical-align:top}.example-table-8>thead>tr>th,.example-table-8>thead>tr>td{vertical-align:bottom}.example-table-8>thead>tr>th,.example-table-8>tbody>tr>th,.example-table-8>tfoot>tr>th,.example-table-8>thead>tr>td,.example-table-8>tbody>tr>td,.example-table-8>tfoot>tr>td{padding:8px 10px}.example-table-8>thead>tr>th,.example-table-8>tbody>tr>th,.example-table-8>tfoot>tr>th,.example-table-8>thead>tr>td,.example-table-8>tbody>tr>td,.example-table-8>tfoot>tr>td{border-left:1px solid #d1d1d1}.example-table-8>thead>tr>th:first-child,.example-table-8>tbody>tr>th:first-child,.example-table-8>tfoot>tr>th:first-child,.example-table-8>thead>tr>td:first-child,.example-table-8>tbody>tr>td:first-child,.example-table-8>tfoot>tr>td:first-child{border-left:0}.example-table-9{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%;border:0}.example-table-9 th{text-align:left}.example-table-9>tbody>tr>th,.example-table-9>tfoot>tr>th,.example-table-9>tbody>tr>td,.example-table-9>tfoot>tr>td{vertical-align:top}.example-table-9>thead>tr>th,.example-table-9>thead>tr>td{vertical-align:bottom}.example-table-9>thead>tr>th,.example-table-9>tbody>tr>th,.example-table-9>tfoot>tr>th,.example-table-9>thead>tr>td,.example-table-9>tbody>tr>td,.example-table-9>tfoot>tr>td{padding:8px 10px}.example-table-9>thead>tr>th,.example-table-9>tbody>tr>th,.example-table-9>tfoot>tr>th,.example-table-9>thead>tr>td,.example-table-9>tbody>tr>td,.example-table-9>tfoot>tr>td{border:0}.example-table-9>thead>tr>th,.example-table-9>thead>tr>td{border-bottom:1px solid #d1d1d1}.example-table-10{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%;border:0}.example-table-10 th{text-align:left}.example-table-10>tbody>tr>th,.example-table-10>tfoot>tr>th,.example-table-10>tbody>tr>td,.example-table-10>tfoot>tr>td{vertical-align:top}.example-table-10>thead>tr>th,.example-table-10>thead>tr>td{vertical-align:bottom}.example-table-10>thead>tr>th,.example-table-10>tbody>tr>th,.example-table-10>tfoot>tr>th,.example-table-10>thead>tr>td,.example-table-10>tbody>tr>td,.example-table-10>tfoot>tr>td{padding:8px 10px}.example-table-10>thead>tr>th,.example-table-10>tbody>tr>th,.example-table-10>tfoot>tr>th,.example-table-10>thead>tr>td,.example-table-10>tbody>tr>td,.example-table-10>tfoot>tr>td{border:0}.example-table-11{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%}.example-table-11 th{text-align:left}.example-table-11>tbody>tr>th,.example-table-11>tfoot>tr>th,.example-table-11>tbody>tr>td,.example-table-11>tfoot>tr>td{vertical-align:top}.example-table-11>thead>tr>th,.example-table-11>thead>tr>td{vertical-align:bottom}.example-table-11>thead>tr>th,.example-table-11>tbody>tr>th,.example-table-11>tfoot>tr>th,.example-table-11>thead>tr>td,.example-table-11>tbody>tr>td,.example-table-11>tfoot>tr>td{padding:8px 10px}.example-table-11>tbody>tr:nth-child(even)>td,.example-table-11>tbody>tr:nth-child(even)>th{background:#ffc;color:#000}.example-table-12{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%}.example-table-12 th{text-align:left}.example-table-12>tbody>tr>th,.example-table-12>tfoot>tr>th,.example-table-12>tbody>tr>td,.example-table-12>tfoot>tr>td{vertical-align:top}.example-table-12>thead>tr>th,.example-table-12>thead>tr>td{vertical-align:bottom}.example-table-12>thead>tr>th,.example-table-12>tbody>tr>th,.example-table-12>tfoot>tr>th,.example-table-12>thead>tr>td,.example-table-12>tbody>tr>td,.example-table-12>tfoot>tr>td{padding:8px 10px}.example-table-12>tbody>tr:nth-child(even):hover>td,.example-table-12>tbody>tr:nth-child(even):hover>th{background:#f0f0f0}.example-table-12>tbody>tr:nth-child(odd):hover>td,.example-table-12>tbody>tr:nth-child(odd):hover>th{background:#f0f0f0}.example-table-13{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%;border:1px solid #d1d1d1}.example-table-13 th{text-align:left}.example-table-13>tbody>tr>th,.example-table-13>tfoot>tr>th,.example-table-13>tbody>tr>td,.example-table-13>tfoot>tr>td{vertical-align:top}.example-table-13>thead>tr>th,.example-table-13>thead>tr>td{vertical-align:bottom}.example-table-13>thead>tr>th,.example-table-13>tbody>tr>th,.example-table-13>tfoot>tr>th,.example-table-13>thead>tr>td,.example-table-13>tbody>tr>td,.example-table-13>tfoot>tr>td{padding:8px 10px}.example-table-13>thead>tr>th,.example-table-13>tbody>tr>th,.example-table-13>tfoot>tr>th,.example-table-13>thead>tr>td,.example-table-13>tbody>tr>td,.example-table-13>tfoot>tr>td{border:1px solid #d1d1d1}.example-table-13>tbody>tr:nth-child(odd)>td,.example-table-13>tbody>tr:nth-child(odd)>th{background:#fff}.example-table-13>tbody>tr:nth-child(even):hover>td,.example-table-13>tbody>tr:nth-child(even):hover>th{background:#f0f0f0}.example-table-13>tbody>tr:nth-child(odd):hover>td,.example-table-13>tbody>tr:nth-child(odd):hover>th{background:#f0f0f0}@media only screen and (max-width: 768px){.example-table-14{ overflow-x:auto;overflow-y:hidden;width:100%;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch}}.example-table-15{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%;border:1px solid #d1d1d1}.example-table-15 th{text-align:left}.example-table-15>tbody>tr>th,.example-table-15>tfoot>tr>th,.example-table-15>tbody>tr>td,.example-table-15>tfoot>tr>td{vertical-align:top}.example-table-15>thead>tr>th,.example-table-15>thead>tr>td{vertical-align:bottom}.example-table-15>thead>tr>th,.example-table-15>tbody>tr>th,.example-table-15>tfoot>tr>th,.example-table-15>thead>tr>td,.example-table-15>tbody>tr>td,.example-table-15>tfoot>tr>td{padding:8px 10px}.example-table-15>thead>tr>th,.example-table-15>tbody>tr>th,.example-table-15>tfoot>tr>th,.example-table-15>thead>tr>td,.example-table-15>tbody>tr>td,.example-table-15>tfoot>tr>td{border:1px solid #d1d1d1}.example-table-15>tbody>tr:nth-child(odd)>td,.example-table-15>tbody>tr:nth-child(odd)>th{background:#fff}.example-table-15>tbody>tr:nth-child(even):hover>td,.example-table-15>tbody>tr:nth-child(even):hover>th{background:#f0f0f0}.example-table-15>tbody>tr:nth-child(odd):hover>td,.example-table-15>tbody>tr:nth-child(odd):hover>th{background:#f0f0f0}@media only screen and (max-width: 768px){.example-table-15{ background:#cff;border:0;display:block}.example-table-15>tbody>tr:nth-child(odd)>td,.example-table-15>tbody>tr:nth-child(odd)>th{background:#cff}.example-table-15>tbody>tr:nth-child(even):hover>td,.example-table-15>tbody>tr:nth-child(even):hover>th{background:#cff}.example-table-15>tbody>tr:nth-child(odd):hover>td,.example-table-15>tbody>tr:nth-child(odd):hover>th{background:#cff}.example-table-15>thead>tr>th{display:none}.example-table-15>tbody{display:block}.example-table-15>tbody>tr{display:block}.example-table-15>tbody>tr td,.example-table-15>tbody>tr th{border-bottom:0;display:block;padding:5px 0}.example-table-15>tbody>tr td:before,.example-table-15>tbody>tr th:before{padding-right:10px;content:attr(data-th) ':';display:inline-block;color:#111;font-weight:700}.example-table-15>tbody>tr td{background:#cff}.example-table-15>tbody>tr>th{background-color:#ffc!important}}.example-tooltip-bottom{position:relative}.example-tooltip-bottom .tooltip-content{background:#fff;max-width:360px;min-width:210px;padding:12px 16px;z-index:100;display:none;position:absolute;text-align:left;color:#333;line-height:1.4;border:1px solid #bbb;margin-top:5px;left:0;top:100%}.example-tooltip-bottom .tooltip-content:after,.example-tooltip-bottom .tooltip-content:before{border:solid transparent;content:'';height:0;position:absolute;width:0}.example-tooltip-bottom .tooltip-content:after{border-width:5px;border-color:transparent}.example-tooltip-bottom .tooltip-content:before{border-width:6px;border-color:transparent}.example-tooltip-bottom .tooltip-content:after,.example-tooltip-bottom .tooltip-content:before{bottom:100%}.example-tooltip-bottom .tooltip-content:after{border-bottom-color:#fff;left:15px;margin-left:-5px}.example-tooltip-bottom .tooltip-content:before{border-bottom-color:#bbb;left:15px;margin-left:-6px}.example-tooltip-bottom .tooltip-toggle{cursor:help}.example-tooltip-bottom .tooltip-toggle:hover+.tooltip-content,.example-tooltip-bottom .tooltip-toggle:focus+.tooltip-content,.example-tooltip-bottom:hover .tooltip-content{display:block}.example-tooltip-left{position:relative}.example-tooltip-left .tooltip-content{background:#fff;max-width:360px;min-width:210px;padding:12px 16px;z-index:100;display:none;position:absolute;text-align:left;color:#333;line-height:1.4;border:1px solid #bbb;margin-right:5px;right:100%;top:0}.example-tooltip-left .tooltip-content:after,.example-tooltip-left .tooltip-content:before{border:solid transparent;content:'';height:0;position:absolute;width:0}.example-tooltip-left .tooltip-content:after{border-width:5px;border-color:transparent}.example-tooltip-left .tooltip-content:before{border-width:6px;border-color:transparent}.example-tooltip-left .tooltip-content:after,.example-tooltip-left .tooltip-content:before{left:100%}.example-tooltip-left .tooltip-content:after{border-left-color:#fff;margin-top:-5px;top:15px}.example-tooltip-left .tooltip-content:before{border-left-color:#bbb;margin-top:-6px;top:15px}.example-tooltip-left .tooltip-toggle{cursor:help}.example-tooltip-left .tooltip-toggle:hover+.tooltip-content,.example-tooltip-left .tooltip-toggle:focus+.tooltip-content,.example-tooltip-left:hover .tooltip-content{display:block}.example-tooltip-right{position:relative}.example-tooltip-right .tooltip-content{background:#fff;max-width:360px;min-width:210px;padding:12px 16px;z-index:100;display:none;position:absolute;text-align:left;color:#333;line-height:1.4;border:1px solid #bbb;margin-left:5px;left:100%;top:0}.example-tooltip-right .tooltip-content:after,.example-tooltip-right .tooltip-content:before{border:solid transparent;content:'';height:0;position:absolute;width:0}.example-tooltip-right .tooltip-content:after{border-width:5px;border-color:transparent}.example-tooltip-right .tooltip-content:before{border-width:6px;border-color:transparent}.example-tooltip-right .tooltip-content:after,.example-tooltip-right .tooltip-content:before{right:100%}.example-tooltip-right .tooltip-content:after{border-right-color:#fff;margin-top:-5px;top:15px}.example-tooltip-right .tooltip-content:before{border-right-color:#bbb;margin-top:-6px;top:15px}.example-tooltip-right .tooltip-toggle{cursor:help}.example-tooltip-right .tooltip-toggle:hover+.tooltip-content,.example-tooltip-right .tooltip-toggle:focus+.tooltip-content,.example-tooltip-right:hover .tooltip-content{display:block}.example-tooltip-top{position:relative}.example-tooltip-top .tooltip-content{background:#fff;max-width:360px;min-width:210px;padding:12px 16px;z-index:100;display:none;position:absolute;text-align:left;color:#333;line-height:1.4;border:1px solid #bbb;margin-bottom:5px;bottom:100%;left:0}.example-tooltip-top .tooltip-content:after,.example-tooltip-top .tooltip-content:before{border:solid transparent;content:'';height:0;position:absolute;width:0}.example-tooltip-top .tooltip-content:after{border-width:5px;border-color:transparent}.example-tooltip-top .tooltip-content:before{border-width:6px;border-color:transparent}.example-tooltip-top .tooltip-content:after,.example-tooltip-top .tooltip-content:before{top:100%}.example-tooltip-top .tooltip-content:after{border-top-color:#fff;left:15px;margin-left:-5px}.example-tooltip-top .tooltip-content:before{border-top-color:#bbb;left:15px;margin-left:-6px}.example-tooltip-top .tooltip-toggle{cursor:help}.example-tooltip-top .tooltip-toggle:hover+.tooltip-content,.example-tooltip-top .tooltip-toggle:focus+.tooltip-content,.example-tooltip-top:hover .tooltip-content{display:block}html{font-size:62.5%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-size-adjust:100%}body{color:#333;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.42857143;font-size:1.4rem}p{margin-top:0rem;margin-bottom:1rem}abbr[title]{border-bottom:1px dotted #d1d1d1;cursor:help}b,strong{font-weight:700}em,i{font-style:italic}mark{background:#f0f0f0;color:#000}small,.small{font-size:12px}hr{border:0;border-top:1px solid #d1d1d1;margin-bottom:20px;margin-top:20px}sub,sup{font-size:71.42857143%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dfn{font-style:italic}h1{font-weight:300;line-height:1.1;font-size:2.6rem;margin-top:0rem;margin-bottom:2rem}h2{font-weight:300;line-height:1.1;font-size:2.6rem;margin-top:2.5rem;margin-bottom:2rem}h3{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}h4{font-weight:700;line-height:1.1;font-size:1.4rem;margin-top:2rem;margin-bottom:2rem}h5{font-weight:700;line-height:1.1;font-size:1.2rem;margin-top:2rem;margin-bottom:2rem}h6{font-weight:700;line-height:1.1;font-size:1rem;margin-top:2rem;margin-bottom:2rem}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small{color:#333;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1}a,.alink{color:#1979c3;text-decoration:none}a:visited,.alink:visited{color:#1979c3;text-decoration:none}a:hover,.alink:hover{color:#006bb4;text-decoration:underline}a:active,.alink:active{color:#ff5501;text-decoration:underline}ul,ol{margin-top:0rem;margin-bottom:2.5rem}ul>li,ol>li{margin-top:0rem;margin-bottom:1rem}ul ul,ol ul,ul ol,ol ol{margin-bottom:0}dl{margin-bottom:20px;margin-top:0}dt{font-weight:700;margin-bottom:5px;margin-top:0}dd{margin-bottom:10px;margin-top:0;margin-left:0}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,'Courier New',monospace}code{background:#f0f0f0;color:#111;padding:2px 4px;font-size:1.2rem;white-space:nowrap}kbd{background:#f0f0f0;color:#111;padding:2px 4px;font-size:1.2rem}pre{background:#f0f0f0;border:1px solid #d1d1d1;color:#111;line-height:1.42857143;margin:0 0 10px;padding:10px;font-size:1.2rem;display:block;word-wrap:break-word}pre code{background-color:transparent;border-radius:0;color:inherit;font-size:inherit;padding:0;white-space:pre-wrap}blockquote{border-left:0 solid #d1d1d1;margin:0 0 20px 40px;padding:0;color:#333;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-style:italic;font-weight:400;line-height:1.42857143;font-size:1.4rem}blockquote p:last-child,blockquote ul:last-child,blockquote ol:last-child{margin-bottom:0}blockquote footer,blockquote small,blockquote .small{color:#333;line-height:1.42857143;font-size:1rem;display:block}blockquote footer:before,blockquote small:before,blockquote .small:before{content:'\2014 \00A0'}blockquote cite{font-style:normal}blockquote:before,blockquote:after{content:''}q{quotes:none}q:before,q:after{content:'';content:none}cite{font-style:normal}.example{font-size:2.5rem}.example-line-height{line-height:3rem}.example-word-wrap{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;background:#ccc;width:120px}.example-text-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#ccc;width:120px}.example-text-hide{background-color:transparent;border:0;color:transparent;font:0/0 a;text-shadow:none}.example-hyphens{-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.example-hyphens-none{-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.example-typography{color:#fc0;font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-style:italic;font-weight:500;line-height:1.2;font-size:3rem}.example-list-reset-styles{margin:0;padding:0;list-style:none none}.example-list-inline{margin:0;padding:0;list-style:none none}.example-list-inline>li{display:inline-block;vertical-align:top}.example-link-default{color:#1979c3;text-decoration:none}.example-link-default:visited{color:#1979c3;text-decoration:none}.example-link-default:hover{color:#006bb4;text-decoration:underline}.example-link-default:active{color:#ff5501;text-decoration:underline}.example-link{color:#008000;text-decoration:none}.example-link:visited{color:#1979c3;text-decoration:none}.example-link:hover{color:#ffa500;text-decoration:none}.example-link:active{color:#ff5501;text-decoration:underline}.example-heading{font-weight:300;line-height:1.1;font-size:2.6rem;margin-top:0rem;margin-bottom:2rem}.example-heading-2{font-weight:300;line-height:1.1;font-size:2.6rem;margin-top:2.5rem;margin-bottom:2rem}html{font-size:62.5%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-size-adjust:100%}body{color:#333;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.42857143;font-size:1.4rem}p{margin-top:0rem;margin-bottom:1rem}abbr[title]{border-bottom:1px dotted #d1d1d1;cursor:help}b,strong{font-weight:700}em,i{font-style:italic}mark{background:#f0f0f0;color:#000}small,.small{font-size:12px}hr{border:0;border-top:1px solid #d1d1d1;margin-bottom:20px;margin-top:20px}sub,sup{font-size:71.42857143%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dfn{font-style:italic}h1{font-weight:300;line-height:1.1;font-size:2.6rem;margin-top:0rem;margin-bottom:2rem}h2{font-weight:300;line-height:1.1;font-size:2.6rem;margin-top:2.5rem;margin-bottom:2rem}h3{font-weight:300;line-height:1.1;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}h4{font-weight:700;line-height:1.1;font-size:1.4rem;margin-top:2rem;margin-bottom:2rem}h5{font-weight:700;line-height:1.1;font-size:1.2rem;margin-top:2rem;margin-bottom:2rem}h6{font-weight:700;line-height:1.1;font-size:1rem;margin-top:2rem;margin-bottom:2rem}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small{color:#333;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1}a,.alink{color:#1979c3;text-decoration:none}a:visited,.alink:visited{color:#1979c3;text-decoration:none}a:hover,.alink:hover{color:#006bb4;text-decoration:underline}a:active,.alink:active{color:#ff5501;text-decoration:underline}ul,ol{margin-top:0rem;margin-bottom:2.5rem}ul>li,ol>li{margin-top:0rem;margin-bottom:1rem}ul ul,ol ul,ul ol,ol ol{margin-bottom:0}dl{margin-bottom:20px;margin-top:0}dt{font-weight:700;margin-bottom:5px;margin-top:0}dd{margin-bottom:10px;margin-top:0;margin-left:0}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,'Courier New',monospace}code{background:#f0f0f0;color:#111;padding:2px 4px;font-size:1.2rem;white-space:nowrap}kbd{background:#f0f0f0;color:#111;padding:2px 4px;font-size:1.2rem}pre{background:#f0f0f0;border:1px solid #d1d1d1;color:#111;line-height:1.42857143;margin:0 0 10px;padding:10px;font-size:1.2rem;display:block;word-wrap:break-word}pre code{background-color:transparent;border-radius:0;color:inherit;font-size:inherit;padding:0;white-space:pre-wrap}blockquote{border-left:0 solid #d1d1d1;margin:0 0 20px 40px;padding:0;color:#333;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-style:italic;font-weight:400;line-height:1.42857143;font-size:1.4rem}blockquote p:last-child,blockquote ul:last-child,blockquote ol:last-child{margin-bottom:0}blockquote footer,blockquote small,blockquote .small{color:#333;line-height:1.42857143;font-size:1rem;display:block}blockquote footer:before,blockquote small:before,blockquote .small:before{content:'\2014 \00A0'}blockquote cite{font-style:normal}blockquote:before,blockquote:after{content:''}q{quotes:none}q:before,q:after{content:'';content:none}cite{font-style:normal}.example-clearfix-container-1{border:1px solid red}.example-clearfix-container-2{border:1px solid #0f0}.example-clearfix-container-2:before,.example-clearfix-container-2:after{content:'';display:table}.example-clearfix-container-2:after{clear:both}.example-clearfix-item.left{float:left}.example-clearfix-item.right{float:right}.example-visibility-hidden{height:0;visibility:hidden}.example-visually-hidden-1{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-visually-hidden-2{background:#fdf0d5;padding:5px;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.example-visually-hidden-2{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.example-css-container{padding:20px;background:#e8e8e8}.example-rotate{background:red;position:absolute;height:20px;width:40px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.example-placeholder::-webkit-input-placeholder{color:#808080;font-weight:700}.example-placeholder:-moz-placeholder{color:#808080;font-weight:700}.example-placeholder::-moz-placeholder{color:#808080;font-weight:700}.example-placeholder:-ms-input-placeholder{color:#808080;font-weight:700}.example-background-gradient-1{background-color:#ccf;background-repeat:repeat-x;background-image:-webkit-linear-gradient(top, #cff 0, #ccf 100%);background-image:linear-gradient(to bottom, #cff 0, #ccf 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccffff', endColorstr='#ccccff', GradientType=0)}.example-background-gradient-2{background-color:#ccf;background-repeat:repeat-x;background-image:-webkit-linear-gradient(left,color-stop( #cff 0),color-stop( #ccf 100%));background-image:linear-gradient(to right, #cff 0, #ccf 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccffff', endColorstr='#ccccff', GradientType=1)}.example-background-gradient-3-wrapper{background:#ffc;padding:10px}.example-background-gradient-3{background-color:rgba(255,255,255,0);background-repeat:repeat-x;background-image:-webkit-linear-gradient(left,color-stop(rgba(255,255,255,0) 0),color-stop( #ccf 100%));background-image:linear-gradient(to right,rgba(255,255,255,0) 0, #ccf 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 0)',endColorstr='#ccccff',GradientType=1)}.example-url-check{background:#eee url('/images/test.png') no-repeat 0 0}body{padding:15px;background-image:none}</style></head><body><nav class="bar top cf"><div class="container"><a href="index.html" class="brand">Magento UI Library</a><ul class="menu"><li><a href="#" data-toggle="dropdown-1" unselectable="on" class="dropdown-toggle">files</a><ul id="dropdown-1" hidden class="dropdown"><li><a href="actions-toolbar.html">actions-toolbar</a></li><li><a href="breadcrumbs.html">breadcrumbs</a></li><li><a href="buttons.html">buttons</a></li><li><a href="components.html">components</a></li><li><a href="dropdowns.html">dropdowns</a></li><li><a href="forms.html">forms</a></li><li><a href="icons.html">icons</a></li><li><a href="layout.html">layout</a></li><li><a href="lib.html">lib</a></li><li><a href="loaders.html">loaders</a></li><li><a href="messages.html">messages</a></li><li><a href="pages.html">pages</a></li><li><a href="popups.html">popups</a></li><li><a href="rating.html">rating</a></li><li><a href="resets.html">resets</a></li><li><a href="responsive.html">responsive</a></li><li><a href="sections.html">sections</a></li><li><a href="tables.html">tables</a></li><li><a href="tooltips.html">tooltips</a></li><li><a href="typography.html">typography</a></li><li><a href="utilities.html">utilities</a></li><li><a href="variables.html">variables</a></li><li><a href="docs.html">docs</a></li></ul></li></ul><div class="nav"><button title="Table of Contents" data-toggle="nav-toc"><svg viewBox="0 0 512 512" height="22" width="22" class="icon"><path d="M108.9,403.1V462H50v-58.9H108.9z M108.9,285.4H50v58.9h58.9V285.4zM108.9,50H50v58.9h58.9V50z M108.9,167.7H50v58.9h58.9V167.7z M167.7,344.3H462v-58.9H167.7V344.3zM167.7,50v58.9H462V50H167.7z M167.7,462H462v-58.9H167.7V462z M167.7,226.6H462v-58.9H167.7V226.6z"></path></svg></button><input type="search" placeholder="Search" class="search"></div></div></nav><section class="container"><article id="list-of-global-variables" class="section"><div class="docs"><a href="#list-of-global-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="list-of-global-variables">List of Global Variables</h1>
<h2 id="typography">Typography</h2>
<h4 id="the-codelibtypographyallcode-mixin-variables">The <code>.lib-typography-all()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th class="vars_section" colspan="3">Predefined font family</th>
        </tr>
        <tr>
            <th>@font-family__sans-serif</th>
            <td class="vars_value">'Helvetica Neue', Helvetica, Arial, sans-serif</td>
            <td>Sans-serif font family</td>
        </tr>
        <tr>
            <th>@font-family__serif</th>
            <td class="vars_value">Georgia, 'Times New Roman', Times, serif</td>
            <td>Serif font family</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@font-family__monospace</th>
            <td class="vars_value">Menlo, Monaco, Consolas, 'Courier New', monospace</td>
            <td>Monospace font family</td>
        </tr>
        <tr>
            <th>@font-path</th>
            <td class="vars_value">&quot;../../fonts/&quot;</td>
            <td>Path to custom font</td>
        </tr>
        <tr>
            <th class="vars_section" colspan="3">Predefined colors</th>
        </tr>
        <tr>
            <th>@color-white</th>
            <td class="vars_value">#fff</td>
            <td>White</td>
        </tr>
        <tr>
            <th>@color-gray20</th>
            <td class="vars_value">#333</td>
            <td>Gray 20</td>
        </tr>
        <tr>
            <th>@color-gray56</th>
            <td class="vars_value">#8f8f8f</td>
            <td>Gray 56</td>
        </tr>
        <tr>
            <th>@primary__color</th>
            <td class="vars_value">#555</td>
            <td>Primary color</td>
        </tr>
        <tr>
            <th>@primary__color__dark</th>
            <td class="vars_value">darken(@primary__color, 35%) // #000</td>
            <td>Dark primary color</td>
        </tr>
        <tr>
            <th>@primary__color__darker</th>
            <td class="vars_value">darken(@primary__color, 13.5%) // #111</td>
            <td>Darker primary color</td>
        </tr>
        <tr>
            <th>@primary__color__lighter</th>
            <td class="vars_value">lighten(@primary__color, 23%) // #7d7d7d</td>
            <td>Lighter primary color</td>
        </tr>
        <tr>
            <th>@primary__color__light</th>
            <td class="vars_value">lighten(@primary__color, 45%) // #a6a6a6</td>
            <td>Light primary color</td>
        </tr>
        <tr>
            <th>@border-color__base</th>
            <td class="vars_value">darken(@page__background-color, 18%)</td>
            <td>Base border color</td>
        </tr>
        <tr>
            <th>@border-width__base</th>
            <td class="vars_value">1px</td>
            <td>Base border width</td>
        </tr>
        <tr>
            <th class="vars_section" colspan="3">Fonts settings</th>
        </tr>
        <tr>
            <th>@font-family__base</th>
            <td class="vars_value">@font-family__sans-serif</td>
            <td>Basic font family</td>
        </tr>
        <tr>
            <th>@root__font-size</th>
            <td class="vars_value">62.5%</td>
            <td>Setting font-size for HTML tag, use % units</td>
        </tr>
        <tr>
            <th>@font-size-ratio__base</th>
            <td class="vars_value">1.4</td>
            <td>Defines ratio between root font size and base font size</td>
        </tr>
        <tr>
            <th>@font-size__base</th>
            <td class="vars_value">unit((@root__font-size / 100) * 16 * @font-size-ratio__base, px)</td>
            <td>Base font size value in px</td>
        </tr>
        <tr>
            <th>@font-size__xl</th>
            <td class="vars_value">ceil(1.5 * @font-size__base) // 21</td>
            <td>Extra large font size</td>
        </tr>
        <tr>
            <th>@font-size__l</th>
            <td class="vars_value">ceil(1.25 * @font-size__base) // 18</td>
            <td>Large font size</td>
        </tr>
        <tr>
            <th>@font-size__s</th>
            <td class="vars_value">ceil(.85 * @font-size__base) // 12</td>
            <td>Small font size</td>
        </tr>
        <tr>
            <th>@font-size__xs</th>
            <td class="vars_value">floor(.75 * @font-size__base) // 11</td>
            <td>Extra small font size</td>
        </tr>
        <tr>
            <th>@font-weight__regular</th>
            <td class="vars_value">400</td>
            <td>Basic font weight</td>
        </tr>
        <tr>
            <th>@font-weight__light</th>
            <td class="vars_value">200</td>
            <td>Light font weight</td>
        </tr>
        <tr>
            <th>@font-weight__semibold</th>
            <td class="vars_value">600</td>
            <td>Semibold font weight</td>
        </tr>
        <tr>
            <th>@font-weight__bold</th>
            <td class="vars_value">700</td>
            <td>Bold font weight</td>
        </tr>
        <tr>
            <th>@font-style__base</th>
            <td class="vars_value">normal</td>
            <td>Font style</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@font-style__emphasis</th>
            <td class="vars_value">italic</td>
            <td>Emphasis font style</td>
        </tr>
        <tr>
            <th>@line-height__base</th>
            <td class="vars_value">1.428571429</td>
            <td>Base line height</td>
        </tr>
        <tr>
            <th>@line-height__computed</th>
            <td class="vars_value">floor(@font-size__base * @line-height__base)</td>
            <td>Computed line height depending on base font size</td>
        </tr>
        <tr>
            <th>@line-height__l</th>
            <td class="vars_value">1.5</td>
            <td>Large line height</td>
        </tr>
        <tr>
            <th>@line-height__s</th>
            <td class="vars_value">1.33</td>
            <td>Small line height</td>
        </tr>
        <tr>
            <th>@text__color</th>
            <td class="vars_value">@primary__color</td>
            <td>Primary text color</td>
        </tr>
        <tr>
            <th>@text__color__intense</th>
            <td class="vars_value">@primary__color__darker</td>
            <td>Darker text color</td>
        </tr>
        <tr>
            <th>@text__color__muted</th>
            <td class="vars_value">@primary__color__lighter</td>
            <td>Lighter text color</td>
        </tr>
        <tr>
            <th>@indent__base</th>
            <td class="vars_value">@line-height__computed // 20px</td>
            <td>Base text ident (20px)</td>
        </tr>
        <tr>
            <th>@indent__xl</th>
            <td class="vars_value">@line-height__computed * 2 // 40px</td>
            <td>Extra large text ident (40px)</td>
        </tr>
        <tr>
            <th>@indent__l</th>
            <td class="vars_value">@line-height__computed * 1.5 // 30px</td>
            <td>Large text ident (30px)</td>
        </tr>
        <tr>
            <th>@indent__m</th>
            <td class="vars_value">@indent__base * 1.25 // 25px</td>
            <td>Extra large text ident (25px)</td>
        </tr>
        <tr>
            <th>@indent__s</th>
            <td class="vars_value">@line-height__computed / 2 //10px </td>
            <td>Small text ident (10px)</td>
        </tr>
        <tr>
            <th>@indent__xs</th>
            <td class="vars_value">@line-height__computed / 4 // 5px</td>
            <td>Extra small text ident (5px)</td>
        </tr>
        <tr>
            <th colspan="3" class="vars_section">Links</th>
        </tr>
        <tr>
            <th>@link__color</th>
            <td class="vars_value">#1979c3</td>
            <td>Links color</td>
        </tr>
        <tr>
            <th>@link__text-decoration</th>
            <td class="vars_value">none</td>
            <td>Links text decoration</td>
        </tr>
        <tr>
            <th>@link__visited__color</th>
            <td class="vars_value">#800080</td>
            <td>Visited links color</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@link__visited__text-decoration</th>
            <td class="vars_value">none</td>
            <td>Visited links text decoration</td>
        </tr>
        <tr>
            <th>@link__hover__color</th>
            <td class="vars_value">#006bb4</td>
            <td>Hovered links color</td>
        </tr>
        <tr>
            <th>@link__hover__text-decoration</th>
            <td class="vars_value">underline</td>
            <td>Hovered links text decoration</td>
        </tr>
        <tr>
            <th>@link__active__color</th>
            <td class="vars_value">#ff5501</td>
            <td>Active links color</td>
        </tr>
        <tr>
            <th>@link__active__text-decoration</th>
            <td class="vars_value">underline</td>
            <td>Active links text decoration</td>
        </tr>
        <tr>
            <th class="vars_section" colspan="3">Lists</th>
        </tr>
        <tr>
            <th>@list__color__base</th>
            <td class="vars_value">false</td>
            <td>List text color</td>
        </tr>
        <tr>
            <th>@list__font-size__base</th>
            <td class="vars_value">@font-size__base</td>
            <td>List font size</td>
        </tr>
        <tr>
            <th>@list__margin-top</th>
            <td class="vars_value">0</td>
            <td>List margin top</td>
        </tr>
        <tr>
            <th>@list__margin-bottom</th>
            <td class="vars_value">@indent__m</td>
            <td>List margin bottom</td>
        </tr>
        <tr>
            <th>@list-item__margin-top</th>
            <td class="vars_value">0</td>
            <td>List item margin top</td>
        </tr>
        <tr>
            <th>@list-item__margin-bottom</th>
            <td class="vars_value">@indent__s</td>
            <td>List item margin bottom</td>
        </tr>
        <tr>
            <th colspan="3" class="vars_section">Definition list</th>
        </tr>
        <tr>
            <th>@dl__margin-top</th>
            <td class="vars_value">0</td>
            <td>Definition list margin top</td>
        </tr>
        <tr>
            <th>@dl__margin-bottom</th>
            <td class="vars_value">@indent__base</td>
            <td>Definition list margin bottom</td>
        </tr>
        <tr>
            <th>@dt__margin-top</th>
            <td class="vars_value">0</td>
            <td>Description term margin top</td>
        </tr>
        <tr>
            <th>@dt__margin-bottom</th>
            <td class="vars_value">@indent__xs</td>
            <td>Description term margin bottom</td>
        </tr>
        <tr>
            <th>@dt__font-weight</th>
            <td class="vars_value">@font-weight__bold</td>
            <td>Description term </td>
        </tr>
        <tr>
            <th>@dd__margin-top</th>
            <td class="vars_value">0</td>
            <td>Description margin top</td>
        </tr>
        <tr>
            <th>@dd__margin-bottom</th>
            <td class="vars_value">@indent__s</td>
            <td>Description margin bottom</td>
        </tr>
        <tr>
            <th colspan="3" class="vars_section">Paragraphs</th>
        </tr>
        <tr>
            <th>@p__margin-top</th>
            <td class="vars_value">0</td>
            <td>Paragraph margin top</td>
        </tr>
        <tr>
            <th>@p__margin-bottom</th>
            <td class="vars_value">@indent__s</td>
            <td>Paragraph margin bottom</td>
        </tr>
        <tr>
            <th colspan="3" class="vars_section">Headings</th>
        </tr>
        <tr>
            <th>@heading__font-family__base</th>
            <td class="vars_value">false</td>
            <td>Heading base font family</td>
        </tr>
        <tr>
            <th>@heading__font-style__base</th>
            <td class="vars_value">false</td>
            <td>Heading base font style</td>
        </tr>
        <tr>
            <th>@heading__font-weight__base</th>
            <td class="vars_value">@font-weight__light</td>
            <td>Heading base font weight</td>
        </tr>
        <tr>
            <th>@heading__line-height__base</th>
            <td class="vars_value">1.1</td>
            <td>Heading base line height</td>
        </tr>
        <tr>
            <th>@heading__color__base</th>
            <td class="vars_value">false</td>
            <td>Heading base color</td>
        </tr>
        <tr>
            <th>@heading__margin-top__base</th>
            <td class="vars_value">@indent__base</td>
            <td>Heading base margin top</td>
        </tr>
        <tr>
            <th>@heading__margin-bottom__base</th>
            <td class="vars_value">@indent__base</td>
            <td>Heading base margin bottom</td>
        </tr>
        <tr>
            <th colspan="3" class="vars_section">H1</th>
        </tr>
        <tr>
            <th>@h1__font-size</th>
            <td class="vars_value">ceil((@font-size__base * 2.85)) // 40px</td>
            <td>H1 font size</td>
        </tr>
        <tr>
            <th>@h1__font-color</th>
            <td class="vars_value">@heading__color__base</td>
            <td>H1 color</td>
        </tr>
        <tr>
            <th>@h1__font-family</th>
            <td class="vars_value">@heading__font-family__base</td>
            <td>H1 font family</td>
        </tr>
        <tr>
            <th>@h1__font-weight</th>
            <td class="vars_value">@heading__font-weight__base</td>
            <td>H1 font weight</td>
        </tr>
        <tr>
            <th>@h1__font-style</th>
            <td class="vars_value">@heading__font-style__base</td>
            <td>H1 font style</td>
        </tr>
        <tr>
            <th>@h1__line-height</th>
            <td class="vars_value">@heading__line-height__base</td>
            <td>H1 line height</td>
        </tr>
        <tr>
            <th>@h1__margin-top</th>
            <td class="vars_value">0</td>
            <td>H1 margin top</td>
        </tr>
        <tr>
            <th>@h1__margin-bottom</th>
            <td class="vars_value">@heading__margin-bottom__base</td>
            <td>H1 margin bottom</td>
        </tr>
        <tr>
            <th colspan="3" class="vars_section">H2</th>
        </tr>
        <tr>
            <th>@h2__font-size</th>
            <td class="vars_value">ceil((@font-size__base * 1.85)) // 26px</td>
            <td>H2 font size</td>
        </tr>
        <tr>
            <th>@h2__font-color</th>
            <td class="vars_value">@heading__color__base</td>
            <td>H2 color</td>
        </tr>
        <tr>
            <th>@h2__font-family</th>
            <td class="vars_value">@heading__font-family__base</td>
            <td>H2 font family</td>
        </tr>
        <tr>
            <th>@h2__font-weight</th>
            <td class="vars_value">@heading__font-weight__base</td>
            <td>H2 font weight</td>
        </tr>
        <tr>
            <th>@h2__font-style</th>
            <td class="vars_value">@heading__font-style__base</td>
            <td>H2 font style</td>
        </tr>
        <tr>
            <th>@h2__line-height</th>
            <td class="vars_value">@heading__line-height__base</td>
            <td>H2 line height</td>
        </tr>
        <tr>
            <th>@h2__margin-top</th>
            <td class="vars_value">@indent__m</td>
            <td>H2 margin top</td>
        </tr>
        <tr>
            <th>@h2__margin-bottom</th>
            <td class="vars_value">@heading__margin-bottom__base</td>
            <td>H2 margin bottom</td>
        </tr>
        <tr>
            <th colspan="3" class="vars_section">H3</th>
        </tr>
        <tr>
            <th>@h3__font-size</th>
            <td class="vars_value">ceil((@font-size__base * 1.28)) // 18px</td>
            <td>H3 font size</td>
        </tr>
        <tr>
            <th>@h3__font-color</th>
            <td class="vars_value">@heading__color__base</td>
            <td>H3 color</td>
        </tr>
        <tr>
            <th>@h3__font-family</th>
            <td class="vars_value">@heading__font-family__base</td>
            <td>H3 font family</td>
        </tr>
        <tr>
            <th>@h3__font-weight</th>
            <td class="vars_value">@heading__font-weight__base</td>
            <td>H3 font weight</td>
        </tr>
        <tr>
            <th>@h3__font-style</th>
            <td class="vars_value">@heading__font-style__base</td>
            <td>H3 font style</td>
        </tr>
        <tr>
            <th>@h3__line-height</th>
            <td class="vars_value">@heading__line-height__base</td>
            <td>H3 line height</td>
        </tr>
        <tr>
            <th>@h3__margin-top</th>
            <td class="vars_value">@indent__base * .75</td>
            <td>H3 margin top</td>
        </tr>
        <tr>
            <th>@h3__margin-bottom</th>
            <td class="vars_value">@indent__s</td>
            <td>H3 margin bottom</td>
        </tr>
        <tr>
            <th colspan="3" class="vars_section">H4</th>
        </tr>
        <tr>
            <th>@h4__font-size</th>
            <td class="vars_value">@font-size__base // 14px</td>
            <td>H4 font size</td>
        </tr>
        <tr>
            <th>@h4__font-color</th>
            <td class="vars_value">@heading__color__base</td>
            <td>H4 color</td>
        </tr>
        <tr>
            <th>@h4__font-family</th>
            <td class="vars_value">@heading__font-family__base</td>
            <td>H4 font family</td>
        </tr>
        <tr>
            <th>@h4__font-weight</th>
            <td class="vars_value">@font-weight__bold</td>
            <td>H4 font weight</td>
        </tr>
        <tr>
            <th>@h4__font-style</th>
            <td class="vars_value">@heading__font-style__base</td>
            <td>H4 font style</td>
        </tr>
        <tr>
            <th>@h4__line-height</th>
            <td class="vars_value">@heading__line-height__base</td>
            <td>H4 line height</td>
        </tr>
        <tr>
            <th>@h4__margin-top</th>
            <td class="vars_value">@heading__margin-top__base</td>
            <td>H4 margin top</td>
        </tr>
        <tr>
            <th>@h4__margin-bottom</th>
            <td class="vars_value">@heading__margin-bottom__base</td>
            <td>H4 margin bottom</td>
        </tr>
        <tr>
            <th colspan="3" class="vars_section">H5</th>
        </tr>
        <tr>
            <th>@h5__font-size</th>
            <td class="vars_value">ceil((@font-size__base * .85)) // 12px</td>
            <td>H5 font size</td>
        </tr>
        <tr>
            <th>@h5__font-color</th>
            <td class="vars_value">@heading__color__base</td>
            <td>H5 color</td>
        </tr>
        <tr>
            <th>@h5__font-family</th>
            <td class="vars_value">@heading__font-family__base</td>
            <td>H5 font family</td>
        </tr>
        <tr>
            <th>@h5__font-weight</th>
            <td class="vars_value">@font-weight__bold</td>
            <td>H5 font weight</td>
        </tr>
        <tr>
            <th>@h5__font-style</th>
            <td class="vars_value">@heading__font-style__base</td>
            <td>H5 font style</td>
        </tr>
        <tr>
            <th>@h5__line-height</th>
            <td class="vars_value">@heading__line-height__base</td>
            <td>H5 line height</td>
        </tr>
        <tr>
            <th>@h5__margin-top</th>
            <td class="vars_value">@heading__margin-top__base</td>
            <td>H5 margin top</td>
        </tr>
        <tr>
            <th>@h5__margin-bottom</th>
            <td class="vars_value">@heading__margin-bottom__base</td>
            <td>H5 margin bottom</td>
        </tr>
        <tr>
            <th colspan="3" class="vars_section">H6</th>
        </tr>
        <tr>
            <th>@h6__font-size</th>
            <td class="vars_value">ceil((@font-size__base * .7)) // 10px</td>
            <td>H6 font size</td>
        </tr>
        <tr>
            <th>@h6__font-color</th>
            <td class="vars_value">@heading__color__base</td>
            <td>H6 color</td>
        </tr>
        <tr>
            <th>@h6__font-family</th>
            <td class="vars_value">@heading__font-family__base</td>
            <td>H6 font family</td>
        </tr>
        <tr>
            <th>@h6__font-weight</th>
            <td class="vars_value">@heading__font-weight__base</td>
            <td>H6 font weight</td>
        </tr>
        <tr>
            <th>@h6__font-style</th>
            <td class="vars_value">@heading__font-style__base</td>
            <td>H6 font style</td>
        </tr>
        <tr>
            <th>@h6__line-height</th>
            <td class="vars_value">@heading__line-height__base</td>
            <td>H6 line height</td>
        </tr>
        <tr>
            <th>@h6__margin-top</th>
            <td class="vars_value">@heading__margin-top__base</td>
            <td>H6 margin top</td>
        </tr>
        <tr>
            <th>@h6__margin-bottom</th>
            <td class="vars_value">@heading__margin-bottom__base</td>
            <td>H6 margin bottom</td>
        </tr>
        <tr>
            <th colspan="3" class="vars_section">&lt;small&gt; tags and tags with class .small placed in H1-H6 headings</th>
        </tr>
        <tr>
            <th>@heading__small-color</th>
            <td class="vars_value">@primary__color</td>
            <td>&lt;small&gt; and .small heading element color</td>
        </tr>
        <tr>
            <th>@heading__small-line-height</th>
            <td class="vars_value">1</td>
            <td>&lt;small&gt; and .small heading element line height</td>
        </tr>
        <tr>
            <th>@heading__small-size</th>
            <td class="vars_value">(@font-size__xs/@font-size__base) * 100%</td>
            <td>&lt;small&gt; and .small heading element font size</td>
        </tr>
        <tr>
            <th colspan="3" class="vars_section">Focus</th>
        </tr>
        <tr>
            <th>@focus__box-shadow</th>
            <td class="vars_value">0 0 3px 1px @focus__color</td>
            <td>Focused element highlight</td>
        </tr>
        <tr>
            <th colspan="3" class="vars_section">Code blocks</th>
        </tr>
        <tr>
            <th>@code__background-color</th>
            <td class="vars_value">@panel__background-color</td>
            <td>Code block background</td>
        </tr>
        <tr>
            <th>@code__color</th>
            <td class="vars_value">@primary__color__darker</td>
            <td>Code text color</td>
        </tr>
        <tr>
            <th>@code__font-size</th>
            <td class="vars_value">@font-size__s</td>
            <td>Code font size</td>
        </tr>
        <tr>
            <th>@code__padding</th>
            <td class="vars_value">2px 4px</td>
            <td>Code padding</td>
        </tr>
        <tr>
            <th>@pre__background-color</th>
            <td class="vars_value">@primary__color__light</td>
            <td>Preformatted text background color</td>
        </tr>
        <tr>
            <th>@pre__border-color</th>
            <td class="vars_value">@border-color__base</td>
            <td>Preformatted text border color</td>
        </tr>
        <tr>
            <th>@pre__border-width</th>
            <td class="vars_value">@border-width__base</td>
            <td>Preformatted text border width</td>
        </tr>
        <tr>
            <th>@pre__color</th>
            <td class="vars_value">@primary__color__darker</td>
            <td>Preformatted text color</td>
        </tr>
        <tr>
            <th>@kbd__background-color</th>
            <td class="vars_value">@panel__background-color</td>
            <td>Keyboard input background</td>
        </tr>
        <tr>
            <th>@kbd__color</th>
            <td class="vars_value">@primary__color__darker</td>
            <td>Keyboard input text color</td>
        </tr>
        <tr>
            <th colspan="3" class="vars_section">Blockquote</th>
        </tr>
        <tr>
            <th>@blockquote__border-color</th>
            <td class="vars_value">@border-color__base</td>
            <td>Blockquote border color</td>
        </tr>
        <tr>
            <th>@blockquote__border-width</th>
            <td class="vars_value">0</td>
            <td>Blockquote border width</td>
        </tr>
        <tr>
            <th>@blockquote__content-before</th>
            <td class="vars_value">'\2014 \00A0'</td>
            <td>&quot;-&quot; and space symbols</td>
        </tr>
        <tr>
            <th>@blockquote__font-size</th>
            <td class="vars_value">@font-size__base</td>
            <td>Blockquote font size</td>
        </tr>
        <tr>
            <th>@blockquote__font-style</th>
            <td class="vars_value">@font-style__emphasis</td>
            <td>Blockquote font style</td>
        </tr>
        <tr>
            <th>@blockquote__margin</th>
            <td class="vars_value"> 0 0 @indent__base @indent__xl</td>
            <td>Blockquote margin</td>
        </tr>
        <tr>
            <th>@blockquote__padding</th>
            <td class="vars_value">0</td>
            <td>Blockquote padding</td>
        </tr>
        <tr>
            <th>@blockquote-small__color</th>
            <td class="vars_value">@primary__color</td>
            <td>Blockquote &lt;small&gt; and .small text color</td>
        </tr>
        <tr>
            <th>@blockquote-small__font-size</th>
            <td class="vars_value">@font-size__xs</td>
            <td>Blockquote &lt;small&gt; and .small font size</td>
        </tr>
        <tr>
            <th colspan="3" class="vars_section">Cite</th>
        </tr>
        <tr>
            <th>@cite__font-style</th>
            <td class="vars_value">@font-style__base</td>
            <td>Cite font style</td>
        </tr>
        <tr>
            <th colspan="3" class="vars_section">Other elements</th>
        </tr>
        <tr>
            <th>@hr__border-color</th>
            <td class="vars_value">@border-color__base</td>
            <td>HR border color</td>
        </tr>
        <tr>
            <th>@hr__border-style</th>
            <td class="vars_value">solid</td>
            <td>HR border style</td>
        </tr>
        <tr>
            <th>@hr__border-width</th>
            <td class="vars_value">@border-width__base</td>
            <td>HR border width</td>
        </tr>
        <tr>
            <th>@mark__color</th>
            <td class="vars_value">@primary__color__dark</td>
            <td>&lt;mark&gt; color</td>
        </tr>
        <tr>
            <th>@mark__background-color</th>
            <td class="vars_value">@panel__background-color</td>
            <td>&lt;mark&gt; background</td>
        </tr>
        <tr>
            <th>@abbr__border-color</th>
            <td class="vars_value">@border-color__base</td>
            <td>&lt;abbr&gt; border color</td>
        </tr>
        <tr>
            <th>@disable-filters</th>
            <td class="vars_value">false</td>
            <td>Disable filters output in css</td>
        </tr>
    </table>
  </pre>

<h2 id="base-typography">Base Typography</h2>
<h4 id="the-codelibtypography__basecode-mixin-variables">The <code>.lib-typography__base()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_abbr-border-color</th>
            <td class="vars_value">@abbr__border-color</td>
            <td class="vars_value">@border-color__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>&lt;abbr&gt; border color</td>
        </tr>
        <tr>
            <th>@_dfn-font-style</th>
            <td class="vars_value">@font-style__emphasis</td>
            <td class="vars_value">italic</td>
            <td class="vars_value">'' | false | value</td>
            <td>&lt;dfn&gt; font style</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_emphasis-font-style</th>
            <td class="vars_value">@font-style__emphasis</td>
            <td class="vars_value">italic</td>
            <td class="vars_value">'' | false | value</td>
            <td>&lt;em&gt; font style</td>
        </tr>
        <tr>
            <th>@_hr-border-color</th>
            <td class="vars_value">@hr__border-color</td>
            <td class="vars_value">@border-color__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>HR border color</td>
        </tr>
        <tr>
            <th>@_hr-border-style</th>
            <td class="vars_value">@hr__border-style</td>
            <td class="vars_value">solid</td>
            <td class="vars_value">'' | false | value</td>
            <td>HR border style</td>
        </tr>
        <tr>
            <th>@_hr-border-width</th>
            <td class="vars_value">@hr__border-width</td>
            <td class="vars_value">@border-width__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>HR border width</td>
        </tr>
        <tr>
            <th>@_hr-margin-bottom</th>
            <td class="vars_value">@line-height__computed</td>
            <td class="vars_value">floor(@font-size__base * @line-height__base)</td>
            <td class="vars_value">'' | false | value</td>
            <td>HR margin bottom</td>
        </tr>
        <tr>
            <th>@_hr-margin-top</th>
            <td class="vars_value">@line-height__computed</td>
            <td class="vars_value">floor(@font-size__base * @line-height__base)</td>
            <td class="vars_value">'' | false | value</td>
            <td>HR margin top</td>
        </tr>
        <tr>
            <th>@_mark-background-color</th>
            <td class="vars_value">@mark__background-color</td>
            <td class="vars_value">@panel__background-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>&lt;mark&gt; background color</td>
        </tr>
        <tr>
            <th>@_mark-color</th>
            <td class="vars_value">@mark__color</td>
            <td class="vars_value">@primary__color__dark</td>
            <td class="vars_value">'' | false | value</td>
            <td>&lt;mark&gt; color</td>
        </tr>
        <tr>
            <th>@_p-margin-bottom</th>
            <td class="vars_value">@p__margin-bottom</td>
            <td class="vars_value">@indent__s</td>
            <td class="vars_value">'' | false | value</td>
            <td>Paragraph margin bottom</td>
        </tr>
        <tr>
            <th>@_p-margin-top</th>
            <td class="vars_value">@p__margin-top</td>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | value</td>
            <td>Paragraph margin top</td>
        </tr>
        <tr>
            <th>@_root-font-size</th>
            <td class="vars_value">@root__font-size</td>
            <td class="vars_value">62.5%</td>
            <td class="vars_value">'' | false | value</td>
            <td>Setting font-size for HTML tag</td>
        </tr>
        <tr>
            <th>@_small-font-size</th>
            <td class="vars_value">@font-size__s</td>
            <td class="vars_value">ceil(.85 * @font-size__base) // 12</td>
            <td class="vars_value">'' | false | value</td>
            <td>&lt;small&gt; tag font size</td>
        </tr>
        <tr>
            <th>@_strong-font-weight</th>
            <td class="vars_value">@font-weight__bold</td>
            <td class="vars_value">700</td>
            <td class="vars_value">'' | false | value</td>
            <td>&lt;strong&gt; tag font weight</td>
        </tr>
        <tr>
            <th>@_sub-sup-font-size</th>
            <td class="vars_value">-</td>
            <td class="vars_value">(@font-size__xs / @font-size__base) * 100%</td>
            <td class="vars_value">'' | false | value</td>
            <td>&lt;sup&gt; an &lt;sup&gt; tags font size</td>
        </tr>
    </table>
  </pre>

<h2 id="headings">Headings</h2>
<h4 id="the-codelibtypographyheadingscode-mixin-variables">The <code>.lib-typography-headings()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_heading-small-size</th>
            <td class="vars_value">@heading__small-size</td>
            <td class="vars_value">(@font-size__xs/@font-size__base) * 100%</td>
            <td class="vars_value">'' | false | value</td>
            <td>&lt;small&gt; and .small heading element font-size</td>
        </tr>
        <tr>
            <th>@_heading-small-color</th>
            <td class="vars_value">@heading__small-color</td>
            <td class="vars_value">@primary__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>&lt;small&gt; and .small heading element color</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_heading-small-line-height</th>
            <td class="vars_value">@heading__small-line-height</td>
            <td class="vars_value">1</td>
            <td class="vars_value">'' | false | value</td>
            <td>&lt;small&gt; and .small heading element line height</td>
        </tr>
    </table>
  </pre>

<h2 id="unordered-and-ordered-lists">Unordered and Ordered lists</h2>
<h4 id="the-codelibtypographylistscode-mixin-variables">The <code>.lib-typography-lists()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_list-margin-top</th>
            <td class="vars_value">@list__margin-top</td>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | value</td>
            <td>List margin top</td>
        </tr>
        <tr>
            <th>@_list-margin-bottom</th>
            <td class="vars_value">@list__margin-bottom</td>
            <td class="vars_value">@indent__m</td>
            <td class="vars_value">'' | false | value</td>
            <td>List margin bottom</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_list-item-margin-top</th>
            <td class="vars_value">@list-item__margin-top</td>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | value</td>
            <td>List item margin top</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_list-item-margin-bottom</th>
            <td class="vars_value">@list-item__margin-bottom</td>
            <td class="vars_value">@indent__s</td>
            <td class="vars_value">'' | false | value</td>
            <td>List item margin bottom</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_dl-margin-bottom</th>
            <td class="vars_value">@dl__margin-bottom</td>
            <td class="vars_value">@indent__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Definition list margin bottom</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_dl-margin-top</th>
            <td class="vars_value">@dl__margin-top</td>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | value</td>
            <td>Definition list margin top</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_dt-font-weight</th>
            <td class="vars_value">@dt__font-weight</td>
            <td class="vars_value">@font-weight__bold</td>
            <td class="vars_value">'' | false | value</td>
            <td>Description term font weight</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_dt-margin-bottom</th>
            <td class="vars_value">@dt__margin-bottom</td>
            <td class="vars_value">@indent__xs</td>
            <td class="vars_value">'' | false | value</td>
            <td>Description term margin bottom</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_dt-margin-top</th>
            <td class="vars_value">@dt__margin-top</td>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | value</td>
            <td>Description term margin top</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_dd-margin-bottom</th>
            <td class="vars_value">@dd__margin-bottom</td>
            <td class="vars_value">@indent__s</td>
            <td class="vars_value">'' | false | value</td>
            <td>Description margin bottom</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_dd-margin-top</th>
            <td class="vars_value">@dd__margin-top</td>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | value</td>
            <td>Description margin top</td>
        </tr>
    </table>
  </pre>

<h2 id="code-inline-and-block">Code (inline and block)</h2>
<h4 id="the-codelibtypographycodecode-mixin-variables">The <code>.lib-typography-code()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_font-family-monospace</th>
            <td class="vars_value">@font-family__monospace</td>
            <td class="vars_value">Menlo, Monaco, Consolas, 'Courier New', monospace</td>
            <td class="vars_value">'' | false | value</td>
            <td>Monospace font family</td>
        </tr>
        <tr>
            <th>@_code-background-color</th>
            <td class="vars_value">@code__background-color</td>
            <td class="vars_value">@panel__background-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Code block background</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_code-color</th>
            <td class="vars_value">@code__color</td>
            <td class="vars_value">@primary__color__darker</td>
            <td class="vars_value">'' | false | value</td>
            <td>Code text color</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_code-padding</th>
            <td class="vars_value">@code__padding</td>
            <td class="vars_value">2px 4px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Code block padding</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_code-font-size</th>
            <td class="vars_value">@code__font-size</td>
            <td class="vars_value">@font-size__s</td>
            <td class="vars_value">'' | false | value</td>
            <td>Code block font size</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_kbd-background-color</th>
            <td class="vars_value">@kbd__background-color</td>
            <td class="vars_value">@panel__background-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Keyboard input background</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_kbd-color</th>
            <td class="vars_value">@kbd__color</td>
            <td class="vars_value">@primary__color__darker</td>
            <td class="vars_value">'' | false | value</td>
            <td>Keyboard input text color</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_kbd-padding</th>
            <td class="vars_value">@code__padding</td>
            <td class="vars_value">2px 4px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Keyboard input padding</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_kbd-font-size</th>
            <td class="vars_value">@code__font-size</td>
            <td class="vars_value">@font-size__s</td>
            <td class="vars_value">'' | false | value</td>
            <td>Keyboard input font size</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pre-background-color</th>
            <td class="vars_value">@pre__background-color</td>
            <td class="vars_value">@primary__color__light</td>
            <td class="vars_value">'' | false | value</td>
            <td>Preformatted text background color</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pre-border-width</th>
            <td class="vars_value">@pre__border-width</td>
            <td class="vars_value">@border-width__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Preformatted text border width</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pre-border-color</th>
            <td class="vars_value">@pre__border-color</td>
            <td class="vars_value">@border-color__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Preformatted text border color</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pre-color</th>
            <td class="vars_value">@pre__color</td>
            <td class="vars_value">@primary__color__darker</td>
            <td class="vars_value">'' | false | value</td>
            <td>Text color of preformatted text</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pre-line-height</th>
            <td class="vars_value">@line-height__base</td>
            <td class="vars_value">1.428571429</td>
            <td class="vars_value">'' | false | value</td>
            <td>Preformatted text line height</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pre-margin</th>
            <td class="vars_value">-</td>
            <td class="vars_value">0 0 @indent__s</td>
            <td class="vars_value">'' | false | value</td>
            <td>Preformatted text margin</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pre-padding</th>
            <td class="vars_value">-</td>
            <td class="vars_value">@indent__s</td>
            <td class="vars_value">'' | false | value</td>
            <td>Preformatted text padding</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pre-font-size</th>
            <td class="vars_value">@code__font-size</td>
            <td class="vars_value">@font-size__s</td>
            <td class="vars_value">'' | false | value</td>
            <td>Preformatted text font size</td>
        </tr>
    </table>
  </pre>

<h2 id="blockquotes">Blockquotes</h2>
<h4 id="the-codelibtypographyblockquotecode-mixin-variables">The <code>.lib-typography-blockquote()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th nowrap="nowrap">@_blockquote-border-width</th>
            <td class="vars_value">@blockquote__border-width</td>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | value</td>
            <td>Blockquote border width</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_blockquote-border-color</th>
            <td class="vars_value">@blockquote__border-color</td>
            <td class="vars_value">@border-color__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Blockquote border color</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_blockquote-margin</th>
            <td class="vars_value">@blockquote__margin</td>
            <td class="vars_value">0 0 @indent__base @indent__xl</td>
            <td class="vars_value">'' | false | value</td>
            <td>Blockquote margin</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_blockquote-padding</th>
            <td class="vars_value">@blockquote__padding</td>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | value</td>
            <td>Blockquote padding</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_blockquote-font-size</th>
            <td class="vars_value">@blockquote__font-size</td>
            <td class="vars_value">@font-size__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Blockquote font size</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_blockquote-font-style</th>
            <td class="vars_value">@blockquote__font-style</td>
            <td class="vars_value">@font-style__emphasis</td>
            <td class="vars_value">'' | false | value</td>
            <td>Blockquote font style</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_blockquote-small-color</th>
            <td class="vars_value">@blockquote-small__color</td>
            <td class="vars_value">@primary__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Blockquote &lt;small&gt; and .small text color</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_blockquote-small-line-height</th>
            <td class="vars_value">@line-height__base</td>
            <td class="vars_value">1.428571429</td>
            <td class="vars_value">'' | false | value</td>
            <td>Blockquote &lt;small&gt; and .small line height</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_blockquote-small-font-size</th>
            <td class="vars_value">@blockquote-small__font-size</td>
            <td class="vars_value">@font-size__xs</td>
            <td class="vars_value">'' | false | value</td>
            <td>Blockquote &lt;small&gt; and .small text font size</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_blockquote-small-before-content</th>
            <td class="vars_value">@blockquote__content-before</td>
            <td class="vars_value">'\2014 \00A0'</td>
            <td class="vars_value">'' | false | value</td>
            <td>Blockquote &lt;small&gt; and .small before pseudo element content</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_blockquote-cite</th>
            <td class="vars_value">@cite__font-style</td>
            <td class="vars_value">@font-style__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Blockquote cite font style</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_cite</th>
            <td class="vars_value">@cite__font-style</td>
            <td class="vars_value">@font-style__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Cite font style</td>
        </tr>
    </table>
  </pre>

<h2 id="structure">Structure</h2>
<h4 id="predefined-variables-for-handle-global-zaxis-positioning">Predefined variables for handle global Z-axis positioning</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th></th>
        </tr>
      <tr>
        <th>@z-index-1</th>
        <td class="vars_value">100</td>
        <td class="vars_value">constant</td>
      </tr>
      <tr>
        <th>@z-index-2</th>
        <td class="vars_value">200</td>
        <td class="vars_value">constant</td>
      </tr>
      <tr>
        <th>@z-index-3</th>
        <td class="vars_value">300</td>
        <td class="vars_value">constant</td>
      </tr>
      <tr>
        <th>@z-index-4</th>
        <td class="vars_value">400</td>
        <td class="vars_value">constant</td>
      </tr>
      <tr>
        <th>@z-index-5</th>
        <td class="vars_value">500</td>
        <td class="vars_value">constant</td>
      </tr>
      <tr>
        <th>@z-index-6</th>
        <td class="vars_value">600</td>
        <td class="vars_value">constant</td>
      </tr>
      <tr>
        <th>@z-index-7</th>
        <td class="vars_value">700</td>
        <td class="vars_value">constant</td>
      </tr>
      <tr>
        <th>@z-index-8</th>
        <td class="vars_value">800</td>
        <td class="vars_value">constant</td>
      </tr>
      <tr>
        <th>@z-index-9</th>
        <td class="vars_value">900</td>
        <td class="vars_value">constant</td>
      </tr>
      <tr>
        <th>@z-index-10</th>
        <td class="vars_value">1000</td>
        <td class="vars_value">constant</td>
      </tr>
      <tr>
      <th colspan="3" class="vars_section">Nesting example</th>
      <tr>
        <th>@modal__z-index</th>
        <td class="vars_value">@z-index-9</td>
        <td class="vars_value">@z-index-N</td>
      </tr>
    </table>
  </pre>

<h2 id="actions-toolbar">Actions Toolbar</h2>
<h4 id="the-codelibactionstoolbarcode-mixin-variables">The <code>.lib-actions-toolbar()</code> mixin variables</h4>
  <pre>
    <table>
      <tr>
        <th class="vars_head">Mixin variable</th>
        <th class="vars_head">Global variable</th>
        <th class="vars_head">Default value</th>
        <th class="vars_head">Allowed values</th>
        <th class="vars_head">Comment</th>
      </tr>
      <tr>
        <th>@_actions-toolbar-actions-position</th>
        <td>@actions-toolbar-actions__position</td>
        <td class="vars_value">justify</td>
        <td class="vars_value">justify | left | right | center</td>
        <td>Position for actions in Actions toolbar</td>
      </tr>
      <tr>
        <th>@_actions-toolbar-actions-reverse</th>
        <td>@actions-toolbar-actions__reverse</td>
        <td class="vars_value">false</td>
        <td class="vars_value">true | false</td>
        <td>Reverse primary and secondary blocks position in Actions toolbar</td>
      </tr>
      <tr>
        <th>@_actions-toolbar-margin</th>
        <td>@actions-toolbar__margin</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Margins of the Actions toolbar</td>
      </tr>
      <tr>
        <th>@_actions-toolbar-padding</th>
        <td>@actions-toolbar__padding</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Paddings of the Actions toolbar</td>
      </tr>
      <tr>
        <th>@_actions-toolbar-actions-margin</th>
        <td>@actions-toolbar-actions__margin</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Margins of all .actions in the Actions toolbar</td>
      </tr>
      <tr>
        <th>@_actions-toolbar-primary-actions-margin</th>
        <td>@actions-toolbar-actions-primary__margin</td>
        <td class="vars_value">0 @indent__xs 0 0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Margins of primary .actions in the Actions toolbar</td>
      </tr>
      <tr>
        <th>@_actions-toolbar-secondary-actions-margin</th>
        <td>@actions-toolbar-actions-secondary__margin</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Margins of secondary .actions in the Actions toolbar</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_actions-toolbar-actions-links-margin-top</th>
        <td>@actions-toolbar-actions-links__margin-top</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Margin-top for links with class .action in the Actions toolbar</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_actions-toolbar-primary-actions-links-margin-top</th>
        <td>@actions-toolbar-actions-links-primary__margin-top</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Margin-top for primary links with class .action in the Actions toolbar</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_actions-toolbar-secondary-actions-links-margin-top</th>
        <td>@actions-toolbar-actions-secondary__margin</td>
        <td class="vars_value">6px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Margin-top for secondary links with class .action in the Actions toolbar</td>
      </tr>
    </table>
  </pre>

<h2 id="breadcrumbs-variables">Breadcrumbs variables</h2>
<h4 id="the-codelibbreadcrumbscode-mixin-variables">The <code>.lib-breadcrumbs()</code> mixin variables</h4>
  <pre>
    <table>
      <tr>
        <th class="vars_head">Mixin variable</th>
        <th class="vars_head">Global variable</th>
        <th class="vars_head">Default value</th>
        <th class="vars_head">Allowed values</th>
        <th class="vars_head">Comment</th>
      </tr>
      <tr>
        <th>@_breadcrumbs-font-size</th>
        <td>@breadcrumbs__font-size</td>
        <td class="vars_value">@font-size__s</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs font size</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-display</th>
        <td>@breadcrumbs__display</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | inline | block | inline-block</td>
        <td>Breadcrumbs links display property</td>
      </tr>
      <tr>
        <th>@_breadcrumbs__container-margin</th>
        <td>@breadcrumbs__container-margin</td>
        <td class="vars_value"> 0 0 @indent__base</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs items padding</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-padding</th>
        <td>@breadcrumbs__padding</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs items padding</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Breadcrumbs - separator symbol</th>
      </tr>
      <tr>
        <th>@_breadcrumbs-separator-symbol</th>
        <td>@breadcrumbs-separator__symbol</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | any symbol</td>
        <td>Breadcrumbs separating symbol</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-separator-color</th>
        <td>@breadcrumbs-separator__color</td>
        <td class="vars_value" nowrap="nowrap">@breadcrumbs-current__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs separating symbol color</td>
      </tr>
     <tr>
        <th>@_breadcrumbs-icon-use</th>
        <td>@breadcrumbs-icon__use</td>
        <td class="vars_value">true</td>
        <td class="vars_value">true | false</td>
        <td>Breadcrumbs separating symbol is an icon</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-icon-font-content</th>
        <td>@breadcrumbs-icon__font-content</td>
        <td class="vars_value">@icon-next</td>
        <td class="vars_value">'' | false | icon</td>
        <td>Breadcrumbs separating icon symbol</td>
      </tr>
      <tr>
        <th>@_icon-font</th>
        <td>@breadcrumbs-icon__font</td>
        <td class="vars_value">@icon-font</td>
        <td class="vars_value">'' | false | font</td>
        <td>Breadcrumbs separating icon font</td>
      </tr>
      <tr>
        <th>@_icon-font-size</th>
        <td>@breadcrumbs-icon__font-size</td>
        <td class="vars_value">24px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs separating icon font size</td>
      </tr>
      <tr>
        <th>@_icon-font-line-height</th>
        <td>@breadcrumbs-icon__font-line-height</td>
        <td class="vars_value">18px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs separating icon line height</td>
      </tr>
      <tr>
        <th>@_icon-font-color</th>
        <td>@breadcrumbs-icon__font-color</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs separating icon color</td>
      </tr>
      <tr>
        <th>@_icon-font-margin</th>
        <td>@breadcrumbs-icon__font-margin</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs separating icon margin</td>
      </tr>
      <tr>
        <th>@_icon-font-vertical-align</th>
        <td>@breadcrumbs-icon__font-vertical-align</td>
        <td class="vars_value">top</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs separating icon vertical align</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Breadcrumbs - current page</th>
      </tr>
      <tr>
        <th>@_breadcrumbs-current-color</th>
        <td>@breadcrumbs-current__color</td>
        <td class="vars_value">#a3a3a3</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs current page color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-current-font-weight</th>
        <td>@breadcrumbs-current__font-weight</td>
        <td class="vars_value">@font-weight__regular</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs current page font weight</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-current-background</th>
        <td>@breadcrumbs-current__background</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs current page background</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-current-border</th>
        <td>@breadcrumbs-current__border</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs current page border</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-current-gradient</th>
        <td>@breadcrumbs-current__gradient</td>
        <td class="vars_value">false</td>
        <td class="vars_value">true | false</td>
        <td>Breadcrumbs current page have gradient background</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-current-gradient-direction</th>
        <td>@breadcrumbs-current__gradient-direction</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | vertical | horizontal</td>
        <td>Direction of breadcrumbs current page background gradient (if there is any)</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-current-gradient-color-start</th>
        <td>@breadcrumbs-current__gradient-color-start</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs current page gradient start color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-current-gradient-color-end</th>
        <td>@breadcrumbs-current__gradient-color-end</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs current page gradient end color</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Breadcrumbs link</th>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient</th>
        <td>@breadcrumbs-link__gradient</td>
        <td class="vars_value">false</td>
        <td class="vars_value">true | false</td>
        <td>Breadcrumbs items have gradient background</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient-direction</th>
        <td>@breadcrumbs-link__gradient-direction</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | vertical | horizontal</td>
        <td>Direction of breadcrumbs item background gradient (if there is any)</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Breadcrumbs link - default</th>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-color</th>
        <td>@breadcrumbs-link__color</td>
        <td class="vars_value">@primary__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-background</th>
        <td>@breadcrumbs-link__background</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item background</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-border</th>
        <td>@breadcrumbs-link__border</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item border</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-text-decoration</th>
        <td>@breadcrumbs-link__text-decoration</td>
        <td class="vars_value">none</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item text decoration</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient-color-start</th>
        <td>@breadcrumbs-link__gradient-color-start</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item gradient start color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient-color-end</th>
        <td>@breadcrumbs-link__gradient-color-end</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item gradient end color</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Breadcrumbs link - visited</th>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-color-visited</th>
        <td>@breadcrumbs-link__visited__color</td>
        <td class="vars_value">@primary__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item visited color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-background-visited</th>
        <td>@breadcrumbs-link__visited__background</td>
        <td class="vars_value">@breadcrumbs-link__background</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item visited background</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-border-visited</th>
        <td>@breadcrumbs-link__visited__border</td>
        <td class="vars_value">@breadcrumbs-link__border</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item visited border</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-text-decoration-visited</th>
        <td>@breadcrumbs-link__visited__text-decoration</td>
        <td class="vars_value">none</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item text decoration</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient-color-start-visited</th>
        <td>@breadcrumbs-link__visited__gradient-color-start</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item visited gradient start color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient-color-end-visited</th>
        <td>@breadcrumbs-link__visited__gradient-color-end</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item visited gradient end color</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Breadcrumbs link - hover</th>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-color-hover</th>
        <td>@breadcrumbs-link__hover__color</td>
        <td class="vars_value">@primary__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item hover color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-background-hover</th>
        <td>@breadcrumbs-link__hover__background</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item hover background</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-border-hover</th>
        <td>@breadcrumbs-link__hover__border</td>
        <td class="vars_value">@breadcrumbs-link__border</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item hover border</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-text-decoration-hover</th>
        <td>@breadcrumbs-link__hover__text-decoration</td>
        <td class="vars_value">underline</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item hover text decoration</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient-color-start-hover</th>
        <td>@breadcrumbs-link__hover__gradient-color-start</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item hover gradient start color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient-color-end-hover</th>
        <td>@breadcrumbs-link__hover__gradient-color-end</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item hover gradient end color</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Breadcrumbs link - active</th>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-color-active</th>
        <td>@breadcrumbs-link__active__color</td>
        <td class="vars_value">@primary__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item active color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-background-active</th>
        <td>@breadcrumbs-link__active__background</td>
        <td class="vars_value">@breadcrumbs-link__background</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item active background</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-border-active</th>
        <td>@breadcrumbs-link__active__border</td>
        <td class="vars_value">@breadcrumbs-link__border</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item active border</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-text-decoration-active</th>
        <td>@breadcrumbs-link__active__text-decoration</td>
        <td class="vars_value">none</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item active text decoration</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_breadcrumbs-link-gradient-color-start-active</th>
        <td>@breadcrumbs-link__active__gradient-color-start</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item active gradient start color</td>
      </tr>
      <tr>
        <th>@_breadcrumbs-link-gradient-color-end-active</th>
        <td>@breadcrumbs-link__active__gradient-color-end</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Breadcrumbs item active gradient end color</td>
      </tr>
    </table>
  </pre>

<h2 id="button-variables">Button variables</h2>
<h4 id="the-codelibbuttoncode-mixin-variables">The <code>.lib-button()</code> mixin variables</h4>
  <pre>
    <table>
      <tr>
        <th class="vars_head">Mixin variable</th>
        <th class="vars_head">Global variable</th>
        <th class="vars_head">Default value</th>
        <th class="vars_head">Allowed values</th>
        <th class="vars_head">Comment</th>
      </tr>
      <tr>
        <th>@_button-font-family</th>
        <td>@button__font-family</td>
        <td class="vars_value">@font-family__base</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button font family</td>
      </tr>
      <tr>
        <th>@_button-font-size</th>
        <td>@button__font-size</td>
        <td class="vars_value">@font-size__base</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button font size</td>
      </tr>
      <tr>
        <th>@_button-font-weight</th>
        <td>@button__font-weight</td>
        <td class="vars_value">@font-weight__bold</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button font weight</td>
      </tr>
      <tr>
        <th>@_button-cursor</th>
        <td>@button__cursor</td>
        <td class="vars_value">pointer</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button cursor</td>
      </tr>
      <tr>
        <th>@_button-display</th>
        <td>@button__display</td>
        <td class="vars_value">inline-block</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button display</td>
      </tr>
      <tr>
        <th>@_button-disabled-opacity</th>
        <td>@button__disabled__opacity</td>
        <td class="vars_value">.5</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button disabled opacity</td>
      </tr>
      <tr>
        <th>@_button-line-height</th>
        <td>@button__line-height</td>
        <td class="vars_value">@font-size__base + 2</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button height</td>
      </tr>
      <tr>
        <th>@_button-width</th>
        <td>@button__width</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button width</td>
      </tr>
      <tr>
        <th>@_button-margin</th>
        <td>@button__margin</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button margin</td>
      </tr>
      <tr>
        <th>@_button-padding</th>
        <td>@button__padding</td>
        <td class="vars_value">7px 15px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button padding</td>
      </tr>
      <tr>
        <th>@_button-gradient</th>
        <td>@button__gradient</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | true</td>
        <td>Button has gradient background</td>
      </tr>
      <tr>
        <th>@_button-gradient-direction</th>
        <td>@button__gradient-direction</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | vertical | horizontal</td>
        <td>Direction of button background gradient (if there is any)</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Button default state</th>
      </tr>
      <tr>
        <th>@_button-color</th>
        <td>@button__color</td>
        <td class="vars_value">@primary__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button text color</td>
      </tr>
      <tr>
        <th>@_button-background</th>
        <td>@button__background</td>
        <td class="vars_value">#f2f2f2</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button background</td>
      </tr>
      <tr>
        <th>@_button-border</th>
        <td>@button__border</td>
        <td class="vars_value">1px solid #cdcdcd</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button border</td>
      </tr>
      <tr>
        <th>@_button-gradient-color-start</th>
        <td>@button__gradient-color-start</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Gradient background start color</td>
      </tr>
      <tr>
        <th>@_button-gradient-color-end</th>
        <td>@button__gradient-color-end</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Gradient background end color</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Button hover state</th>
      </tr>
      <tr>
        <th>@_button-color-hover</th>
        <td>@button__hover__color</td>
        <td class="vars_value">#555</td>
        <td class="vars_value">'' | false | value</td>
        <td>Hovered button text color</td>
      </tr>
      <tr>
        <th>@_button-background-hover</th>
        <td>@button__hover__background</td>
        <td class="vars_value">#e2e2e2</td>
        <td class="vars_value">'' | false | value</td>
        <td>Hovered button background</td>
      </tr>
      <tr>
        <th>@_button-border-hover</th>
        <td>@button__hover__border</td>
        <td class="vars_value">@button__border</td>
        <td class="vars_value">'' | false | value</td>
        <td>Hovered button border</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_button-gradient-color-start-hover</th>
        <td>@button__hover__gradient-color-start</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Hovered button gradient background start color</td>
      </tr>
      <tr>
        <th>@_button-gradient-color-end-hover</th>
        <td>@button__hover__gradient-color-end</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Hovered button gradient background end color</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Button active state</th>
      </tr>
      <tr>
        <th>@_button-color-active</th>
        <td>@button__active__color</td>
        <td class="vars_value">@button__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Active button text color</td>
      </tr>
      <tr>
        <th>@_button-background-active</th>
        <td>@button__active__background</td>
        <td class="vars_value">@button__hover__background</td>
        <td class="vars_value">'' | false | value</td>
        <td>Active button background</td>
      </tr>
      <tr>
        <th>@_button-border-active</th>
        <td>@button__active__border</td>
        <td class="vars_value">@button__border</td>
        <td class="vars_value">'' | false | value</td>
        <td>Active button border</td>
      </tr>
      <tr>
        <th>@_button-gradient-color-start-active<br /></th>
        <td>@button__active__gradient-color-start</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Active button gradient background start color</td>
      </tr>
      <tr>
        <th>@_button-gradient-color-end-active</th>
        <td>@button__active__gradient-color-end</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Active button gradient background end color</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Button with icon</th>
      </tr>
      <tr>
        <th>@_button-icon-use</th>
        <td>@button-icon__use</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | true</td>
        <td>Button has an icon</td>
      </tr>
      <tr>
        <th>@_button-font-content</th>
        <td>@button-icon__content</td>
        <td class="vars_value">@icon-settings</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button icon symbol</td>
      </tr>
      <tr>
        <th>@_button-icon-font</th>
        <td>@button-icon__font</td>
        <td class="vars_value">@icon-font</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button icon font</td>
      </tr>
      <tr>
        <th>@_button-icon-font-size</th>
        <td>@button-icon__font-size</td>
        <td class="vars_value">22px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button icon font size</td>
      </tr>
      <tr>
        <th>@_button-icon-font-line-height</th>
        <td>@button-icon__line-height</td>
        <td class="vars_value" nowrap="nowrap">@button-icon__font-size</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button icon line height</td>
      </tr>
      <tr>
        <th>@_button-icon-font-color</th>
        <td>@button-icon__color</td>
        <td class="vars_value">inherit</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button icon color</td>
      </tr>
      <tr>
        <th>@_button-icon-font-color-hover</th>
        <td>@button-icon__hover__font-color</td>
        <td class="vars_value">inherit</td>
        <td class="vars_value">'' | false | value</td>
        <td>Hovered button icon color</td>
      </tr>
      <tr>
        <th>@_button-icon-font-color-active</th>
        <td>@button-icon__active__font-color</td>
        <td class="vars_value">inherit</td>
        <td class="vars_value">'' | false | value</td>
        <td>Active button icon color</td>
      </tr>
      <tr>
        <th>@_button-icon-font-margin</th>
        <td>@button-icon__margin</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button icon margin</td>
      </tr>
      <tr>
        <th>@_button-icon-font-vertical-align</th>
        <td>@button-icon__vertical-align</td>
        <td class="vars_value">top</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button icon vertical align</td>
      </tr>
      <tr>
        <th>@_button-icon-font-position</th>
        <td>@button-icon__position</td>
        <td class="vars_value">@icon__position</td>
        <td class="vars_value">'' | false | before | after</td>
        <td>Button icon font position</td>
      </tr>
      <tr>
        <th>@_button-icon-font-text-hide</th>
        <td>@button-icon__text-hide</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | true</td>
        <td>Button icon text hide</td>
      </tr>
    </table>
  </pre>

<h4 id="the-codelibbuttonprimarycode-mixin-variables">The <code>.lib-button-primary()</code> mixin variables</h4>
<p>  In the variables list primary buttons are configured with <code>@button-primary<strong></code> prefix. So for example to configure primary button background you should use <code>@_button-background</code> variable of the mixin or <code>@button-primary</strong>background</code> of the global variables list.</p>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_button-line-height</th>
            <td>@button-primary__line-height</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Button line-height</td>
        </tr>
        <tr>
            <th>@_button-width</th>
            <td>@button-primary__width</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Button width</td>
        </tr>
        <tr>
            <th>@_button-margin</th>
            <td>@button-primary__margin</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Button margin</td>
        </tr>
        <tr>
            <th>@_button-padding</th>
            <td>@button-primary__padding</td>
            <td class="vars_value">@button__padding</td>
            <td class="vars_value">'' | false | value</td>
            <td>Button padding</td>
        </tr>
        <tr>
            <th>@_button-gradient</th>
            <td>@button-primary__gradient</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | true</td>
            <td>Button has gradient background</td>
        </tr>
        <tr>
            <th>@_button-gradient-direction</th>
            <td>@button-primary__gradient-direction</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | vertical | horizontal</td>
            <td>Direction of button background gradient (if there is any)</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Button default state</th>
        </tr>
        <tr>
            <th>@_button-background</th>
            <td>@button-primary__background</td>
            <td class="vars_value">#1979c3</td>
            <td class="vars_value">'' | false | value</td>
            <td>Button background</td>
        </tr>
        <tr>
            <th>@_button-border</th>
            <td>@button-primary__border</td>
            <td class="vars_value">1px solid #1979c3</td>
            <td class="vars_value">'' | false | value</td>
            <td>Button border</td>
        </tr>
        <tr>
            <th>@_button-color</th>
            <td>@button-primary__color</td>
            <td class="vars_value">#fff</td>
            <td class="vars_value">'' | false | value</td>
            <td>Button text color</td>
        </tr>
        <tr>
            <th>@_button-gradient-color-start</th>
            <td>@button-primary__gradient-color-start</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Gradient background start color</td>
        </tr>
        <tr>
            <th>@_button-gradient-color-end</th>
            <td>@button-primary__gradient-color-end</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Gradient background end color</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Button hover state</th>
        </tr>
        <tr>
            <th>@_button-background-hover</th>
            <td>@button-primary__hover__background</td>
            <td class="vars_value">#006bb4</td>
            <td class="vars_value">'' | false | value</td>
            <td>Hovered button background</td>
        </tr>
        <tr>
            <th>@_button-border-hover</th>
            <td>@button-primary__hover__border</td>
            <td class="vars_value">1px solid #006bb4</td>
            <td class="vars_value">'' | false | value</td>
            <td>Hovered button border</td>
        </tr>
        <tr>
            <th>@_button-color-hover</th>
            <td>@button-primary__hover__color</td>
            <td class="vars_value">@button-primary__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Hovered button text color</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_button-gradient-color-start-hover</th>
            <td>@button-primary__hover__gradient-color-start</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Hovered button gradient background start color</td>
        </tr>
        <tr>
            <th>@_button-gradient-color-end-hover</th>
            <td>@button-primary__hover__gradient-color-end</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Hovered button gradient background end color</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Button active state</th>
        </tr>
        <tr>
            <th>@_button-background-active</th>
            <td>@button-primary__active__background</td>
            <td class="vars_value">@button-primary__hover__background</td>
            <td class="vars_value">'' | false | value</td>
            <td>Active button background</td>
        </tr>
        <tr>
            <th>@_button-border-active</th>
            <td>@button-primary__active__border</td>
            <td class="vars_value">@button-primary__hover__border</td>
            <td class="vars_value">'' | false | value</td>
            <td>Active button border</td>
        </tr>
        <tr>
            <th>@_button-color-active</th>
            <td>@button-primary__active__color</td>
            <td class="vars_value">@button-primary__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Active button text color</td>
        </tr>
        <tr>
            <th>@_button-gradient-color-start-active</th>
            <td>@button-primary__active__gradient-color-start</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Active button gradient background start color</td>
        </tr>
        <tr>
            <th>@_button-gradient-color-end-active</th>
            <td>@button-primary__active__gradient-color-end</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Active button gradient background end color</td>
        </tr>
    </table>
  </pre>

<h4 id="the-codelibbuttonrevertsecondarycolorcode-mixin-variables">The <code>.lib-button-revert-secondary-color()</code> mixin variables</h4>
<p>  The <code>.lib-button-revert-secondary-color()</code> mixin is used to revert button styles to secondary color styles.</p>
  <pre>
    <table>
      <tr>
        <th class="vars_head">Mixin variable</th>
        <th class="vars_head">Global variable</th>
        <th class="vars_head">Default value</th>
        <th class="vars_head">Allowed values</th>
        <th class="vars_head">Comment</th>
      </tr>
      <tr>
        <th>@_button-color</th>
        <td>@button__color</td>
        <td class="vars_value">@button__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button color</td>
      </tr>
      <tr>
        <th>@_button-background</th>
        <td>@button__background</td>
        <td class="vars_value">@button__background</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button background</td>
      </tr>
      <tr>
        <th>@_button-border</th>
        <td>@button__border</td>
        <td class="vars_value">@button__border</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button border</td>
      </tr>
      <tr>
        <th>@_button-color-hover</th>
        <td>@button__hover__color</td>
        <td class="vars_value">@button__hover__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button hover color</td>
      </tr>
      <tr>
        <th>@_button-background-hover</th>
        <td>@button__hover__background</td>
        <td class="vars_value">@button__hover__background</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button hover background</td>
      </tr>
      <tr>
        <th>@_button-border-hover</th>
        <td>@button__hover__border</td>
        <td class="vars_value">@button__hover__border</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button hover border</td>
      </tr>
      <tr>
        <th>@_button-color-active</th>
        <td>@button__active__color</td>
        <td class="vars_value">@button__active__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button active color</td>
      </tr>
      <tr>
        <th>@_button-background-active</th>
        <td>@button__active__background</td>
        <td class="vars_value">@button__active__background</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button active background</td>
      </tr>
      <tr>
        <th>@_button-border-active</th>
        <td>@button__active__border</td>
        <td class="vars_value">@button__active__border</td>
        <td class="vars_value">'' | false | value</td>
        <td>Button active border</td>
      </tr>
    </table>
  </pre>

<h4 id="the-codelibbuttonrevertsecondarysizecode-mixin-variables">The <code>.lib-button-revert-secondary-size()</code> mixin variables</h4>
<p>  The <code>.lib-button-revert-secondary-size()</code> mixin is used to revert button sizes to secondary button sizes.</p>
  <pre>
    <table>
      <tr>
        <th class="vars_head">Mixin variable</th>
        <th class="vars_head">Global variable</th>
        <th class="vars_head">Default value</th>
        <th class="vars_head">Allowed values</th>
        <th class="vars_head">Comment</th>
      </tr>
      <tr>
        <th>@_button-font-size</th>
        <td>@button__font-size</td>
        <td class="vars_value">@button__font-size</td>
        <td class="vars_value">'' | value</td>
        <td>Button font size</td>
      </tr>
      <tr>
        <th>@_button-line-height</th>
        <td>@button__line-height</td>
        <td class="vars_value">@button__line-height</td>
        <td class="vars_value">'' | value</td>
        <td>Button line-height</td>
      </tr>
      <tr>
        <th>@_button-padding</th>
        <td>@button__padding</td>
        <td class="vars_value">@button__padding</td>
        <td class="vars_value">'' | value</td>
        <td>Button padding</td>
      </tr>
    </table>
  </pre>

<h4 id="the-codelibbuttonaslinkcode-mixin-variables">The <code>.lib-button-as-link()</code> mixin variables</h4>
<p>  The <code>.lib-button-as-link()</code> mixin is used to make button look like a link. It resets default button styles.</p>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_link-color</th>
            <td>@link__color</td>
            <td class="vars_value">@link-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Button as a link color</td>
        </tr>
        <tr>
            <th>@_link-color-hover</th>
            <td>@link__hover__color</td>
            <td class="vars_value">@link-color-hover</td>
            <td class="vars_value">'' | false | value</td>
            <td>Button as a link hovered color</td>
        </tr>
        <tr>
            <th>@_line-height</th>
            <td>@line-height__base</td>
            <td class="vars_value">@line-height-base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Button as a link line height</td>
        </tr>
        <tr>
            <th>@_margin</th>
            <td>-</td>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | value</td>
            <td>Button as a link margin</td>
        </tr>
        <tr>
            <th>@_padding</th>
            <td>-</td>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | value</td>
            <td>Button as a link padding</td>
        </tr>
        <tr>
            <th>@_disabled_opacity</th>
            <td>@button__disabled__opacity</td>
            <td class="vars_value">.5</td>
            <td class="vars_value">range between .1 and .9</td>
            <td>Button as a link opacity</td>
        </tr>
    </table>
  </pre>

<h2 id="dropdown-variables">Drop-down variables</h2>
<h4 id="the-codelibdropdowncode-mixin-variables">The <code>.lib-dropdown()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_toggle-selector</th>
            <td>-</td>
            <td class="vars_value">~".action.toggle"</td>
            <td class="vars_value">Selector</td>
            <td>Toggle selector</td>
        </tr>
        <tr>
            <th>@_options-selector</th>
            <td>-</td>
            <td class="vars_value">~"ul.dropdown"</td>
            <td class="vars_value">Selector</td>
            <td>Options selector</td>
        </tr>
        <tr>
            <th>@_dropdown-actions-padding</th>
            <td>@dropdown-actions__padding</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle element padding</td>
        </tr>
        <tr>
            <th>@_dropdown-list-min-width</th>
            <td>@dropdown-list__min-width</td>
            <td class="vars_value">100%</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down min width value</td>
        </tr>
        <tr>
            <th>@_dropdown-list-width</th>
            <td>@dropdown-list__width</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list width value</td>
        </tr>
        <tr>
            <th>@_dropdown-list-height</th>
            <td>@dropdown-list__height</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list height value</td>
        </tr>
        <tr>
            <th>@_dropdown-list-margin-top</th>
            <td>@dropdown-list__margin-top</td>
            <td class="vars_value">4px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list margin-top value</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Drop-down list</th>
        </tr>
        <tr>
            <th>@_dropdown-list-position-top</th>
            <td>@dropdown-list__position-top</td>
            <td class="vars_value">100%</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list position: top</td>
        </tr>
        <tr>
            <th>@_dropdown-list-position-right</th>
            <td>@dropdown-list__position-right</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list position: right</td>
        </tr>
        <tr>
            <th>@_dropdown-list-position-bottom</th>
            <td>@dropdown-list__position-bottom</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list position: bottom</td>
        </tr>
        <tr>
            <th>@_dropdown-list-position-left</th>
            <td>@dropdown-list__position-left</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list position: left</td>
        </tr>
        <tr>
            <th>@_dropdown-list-background</th>
            <td>@dropdown-list__background</td>
            <td class="vars_value">@color-white</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list background</td>
        </tr>
        <tr>
            <th>@_dropdown-list-border</th>
            <td>@dropdown-list__border</td>
            <td class="vars_value">1px solid #bbb</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list border</td>
        </tr>
        <tr>
            <th>@_dropdown-list-pointer</th>
            <td>@dropdown-list__pointer</td>
            <td class="vars_value">true</td>
            <td class="vars_value">true | false</td>
            <td>Drop-down list pointer is visible</td>
        </tr>
        <tr>
            <th>@_dropdown-list-pointer-border</th>
            <td>@dropdown-list-pointer__border</td>
            <td class="vars_value">#bbb</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list pointer border</td>
        </tr>
        <tr>
            <th>@_dropdown-list-pointer-position</th>
            <td>@dropdown-list-pointer__position</td>
            <td class="vars_value">left</td>
            <td class="vars_value">left | right</td>
            <td>Drop-down pointer position</td>
        </tr>
        <tr>
            <th>@_dropdown-list-pointer-position-top</th>
            <td>@dropdown-list-pointer__position-top</td>
            <td class="vars_value">-12px</td>
            <td class="vars_value">value</td>
            <td>Drop-down pointer top position</td>
        </tr>
        <tr>
            <th>@_dropdown-list-pointer-position-left-right</th>
            <td>@dropdown-list-pointer__position-left-right</td>
            <td class="vars_value">10px</td>
            <td class="vars_value">value</td>
            <td>Drop-down pointer left or right position</td>
        </tr>
        <tr>
            <th>@_dropdown-list-item-border</th>
            <td>@dropdown-list-item__border</td>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list item border</td>
        </tr>
        <tr>
            <th>@_dropdown-list-item-padding</th>
            <td>@dropdown-list-item__padding</td>
            <td class="vars_value">3px @indent__xs</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list item padding</td>
        </tr>
        <tr>
            <th>@_dropdown-list-item-margin</th>
            <td>@dropdown-list-item__margin</td>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list item margin</td>
        </tr>
        <tr>
            <th>@_dropdown-list-item-hover</th>
            <td>@dropdown-list-item__hover</td>
            <td class="vars_value">#e8e8e8</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list item hovered background</td>
        </tr>
        <tr>
            <th>@_dropdown-list-shadow</th>
            <td>@dropdown-list__shadow</td>
            <td class="vars_value">0 3px 3px rgba(0,0,0,.15)</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list shadow</td>
        </tr>
        <tr>
            <th>@_dropdown-list-z-index</th>
            <td>@dropdown-list__z-index</td>
            <td class="vars_value">100</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list z-index</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Drop-down icon</th>
        </tr>
        <tr>
            <th>@_dropdown-toggle-icon-content</th>
            <td>@dropdown-toggle-icon__content</td>
            <td class="vars_value">@icon-pointer-down</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon symbol code for default state</td>
        </tr>
        <tr>
            <th nowrap>@_dropdown-toggle-active-icon-content</th>
            <td>@dropdown-toggle-icon__active__content</td>
            <td class="vars_value">@icon-pointer-up</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon symbol code for active state</td>
        </tr>
        <tr>
            <th>@_icon-font</th>
            <td>@dropdown-toggle-icon__font</td>
            <td class="vars_value">@button-icon__font</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon font</td>
        </tr>
        <tr>
            <th>@_icon-font-size</th>
            <td>@dropdown-toggle-icon__font-size</td>
            <td class="vars_value">@button-icon__font-size</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon font size</td>
        </tr>
        <tr>
            <th>@_icon-font-line-height</th>
            <td>@dropdown-toggle-icon__font-line-height</td>
            <td class="vars_value">@button-icon__line-height</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon line height</td>
        </tr>
        <tr>
            <th>@_icon-font-color</th>
            <td>@dropdown-toggle-icon__font-color</td>
            <td class="vars_value">@button-icon__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon color</td>
        </tr>
        <tr>
            <th>@_icon-font-color-hover</th>
            <td>@dropdown-toggle-icon__font-color-hover</td>
            <td class="vars_value">@button-icon__hover__font-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon hovered color</td>
        </tr>
        <tr>
            <th>@_icon-font-color-active</th>
            <td>@dropdown-toggle-icon__font-color-active</td>
            <td class="vars_value">@button-icon__active__font-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon active color</td>
        </tr>
        <tr>
            <th>@_icon-font-margin</th>
            <td>@dropdown-toggle-icon__font-margin</td>
            <td class="vars_value">@button-icon__margin</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon margin</td>
        </tr>
        <tr>
            <th>@_icon-font-position</th>
            <td>@dropdown-toggle-icon__position</td>
            <td class="vars_value">after</td>
            <td class="vars_value">before | after</td>
            <td>Drop-down toggle icon position</td>
        </tr>
        <tr>
            <th>@_icon-font-vertical-align</th>
            <td>@dropdown-toggle-icon__font-vertical-align</td>
            <td class="vars_value" nowrap="nowrap">@button-icon__vertical-align</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon vertical align</td>
        </tr>
        <tr>
            <th>@_icon-font-text-hide</th>
            <td>@dropdown-toggle-icon__text-hide</td>
            <td class="vars_value">@button-icon__text-hide</td>
            <td class="vars_value">true | false</td>
            <td>Text in the tag, that contains icon, is hidden</td>
        </tr>
    </table>
  </pre>

<h2 id="split-button-variables">Split button variables</h2>
<h4 id="the-codelibdropdownsplitcode-mixin-variables">The <code>.lib-dropdown-split()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_toggle-selector</th>
            <td>-</td>
            <td class="vars_value">~".action.toggle"</td>
            <td class="vars_value">selector</td>
            <td>Split button action toggle selector</td>
        </tr>
        <tr>
            <th>@_options-selector</th>
            <td>-</td>
            <td class="vars_value">~"ul.dropdown"</td>
            <td class="vars_value">selector</td>
            <td>Split button options selector</td>
        </tr>
        <tr>
            <th>@_button-selector</th>
            <td>-</td>
            <td class="vars_value">~".action.split"</td>
            <td class="vars_value">selector</td>
            <td>Split button selector</td>
        </tr>
        <tr>
            <th>@_dropdown-split-actions-padding</th>
            <td>@dropdown-split-actions__padding</td>
            <td class="vars_value">0 @indent__xs</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button toggle element padding</td>
        </tr>
        <tr>
            <th>@_dropdown-split-button-actions-padding</th>
            <td>@dropdown-split-button__actions__padding</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button actions padding</td>
        </tr>
        <tr>
            <th>@_dropdown-split-toggle-actions-padding</th>
            <td>@dropdown-split-toggle__actions__padding</td>
            <td class="vars_value">4px @indent__xs</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button toggle padding</td>
        </tr>
        <tr>
            <th>@_dropdown-split-toggle-position</th>
            <td>@dropdown-split-toggle__position</td>
            <td class="vars_value">right</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button toggle element position</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Drop-down list</th>
        </tr>
        <tr>
            <th>@_dropdown-split-list-min-width</th>
            <td>@dropdown-split-list__min-width</td>
            <td class="vars_value">100%</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button min width</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-width</th>
            <td>@dropdown-split-list__width</td>
            <td class="vars_value">100%</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button width</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-height</th>
            <td>@dropdown-split-list__height</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button height</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-margin-top</th>
            <td>@dropdown-split-list__margin-top</td>
            <td class="vars_value">4px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button margin-top</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-position-top</th>
            <td>@dropdown-split-list__position-top</td>
            <td class="vars_value">@dropdown-list__position-top</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list position: top</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-position-right</th>
            <td>@dropdown-split-list__position-right</td>
            <td class="vars_value">@dropdown-list__position-right</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list position: right</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-position-bottom</th>
            <td>@dropdown-split-list__position-bottom</td>
            <td class="vars_value">@dropdown-list__position-bottom</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list position: bottom</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-position-left</th>
            <td>@dropdown-split-list__position-left</td>
            <td class="vars_value">@dropdown-list__position-left</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list position: left</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-background</th>
            <td>@dropdown-split-list__background</td>
            <td class="vars_value">@dropdown-list__background</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down background</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-border</th>
            <td>@dropdown-split-list__border</td>
            <td class="vars_value">@dropdown-list__border</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down border</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-pointer</th>
            <td>@dropdown-split-list__pointer</td>
            <td class="vars_value">@dropdown-list__pointer</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list pointer</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-pointer-border</th>
            <td>@dropdown-split-list__pointer-border</td>
            <td class="vars_value">@dropdown-list-pointer__border</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list pointer border</td>
        </tr>
        <tr>
            <th>@_dropdown-split-button-border-radius-fix</th>
            <td>@dropdown-split-button__border-radius-fix</td>
            <td class="vars_value">false</td>
            <td class="vars_value">true | false</td>
            <td>Split button drop-down list item border</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-item-border</th>
            <td>@dropdown-split-list__item-border</td>
            <td class="vars_value">@dropdown-list-item__border</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list item border</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-item-padding</th>
            <td>@dropdown-split-list__item-padding</td>
            <td class="vars_value">@dropdown-list-item__padding</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list item padding</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-item-margin</th>
            <td>@dropdown-split-list__item-margin</td>
            <td class="vars_value">@dropdown-list-item__margin</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list item margin</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-item-hover</th>
            <td>@dropdown-split-list__item-hover</td>
            <td class="vars_value">@dropdown-list-item__hover</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list item hovered background</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-pointer-position</th>
            <td>@dropdown-split-list__pointer-position</td>
            <td class="vars_value">right</td>
            <td class="vars_value">left | right</td>
            <td>Split button drop-down list pointer position</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-pointer-position-top</th>
            <td>@dropdown-split-list__pointer-position-top</td>
            <td class="vars_value">-12px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list pointer position top</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-pointer-position-left-right</th>
            <td>@dropdown-split-list__pointer-position-left-right</td>
            <td class="vars_value">10px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list pointer left or right position</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-shadow</th>
            <td>@dropdown-split-list__shadow</td>
            <td class="vars_value">@dropdown-list__shadow</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list shadow</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-z-index</th>
            <td>@dropdown-split-list__z-index</td>
            <td class="vars_value">@dropdown-list__z-index</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list z-index</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Dropdown icon</th>
        </tr>
        <tr>
            <th>@_dropdown-split-toggle-icon-content</th>
            <td>@dropdown-split-toggle-icon__content</td>
            <td class="vars_value">@dropdown-toggle-icon__content</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon - default state</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_dropdown-split-toggle-active-icon-content</th>
            <td>@dropdown-split-toggle-icon__active__content</td>
            <td class="vars_value" nowrap="nowrap">@dropdown-toggle-icon__active__content</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon - active state</td>
        </tr>
        <tr>
            <th>@_icon-font</th>
            <td>@dropdown-split-toggle-icon__font</td>
            <td class="vars_value">@button-icon__font</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon font</td>
        </tr>
        <tr>
            <th>@_icon-font-size</th>
            <td>@dropdown-split-toggle-icon__font-size</td>
            <td class="vars_value">@button-icon__font-size</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon font size</td>
        </tr>
        <tr>
            <th>@_icon-font-line-height</th>
            <td>@dropdown-split-toggle-icon__font-line-height</td>
            <td class="vars_value">@button-icon__line-height</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon line height</td>
        </tr>
        <tr>
            <th>@_icon-font-color</th>
            <td>@dropdown-split-toggle-icon__font-color</td>
            <td class="vars_value">@button-icon__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon color</td>
        </tr>
        <tr>
            <th>@_icon-font-color-hover</th>
            <td>@dropdown-split-toggle-icon__font-color-hover</td>
            <td class="vars_value">@button-icon__hover__font-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon hovered color</td>
        </tr>
        <tr>
            <th>@_icon-font-color-active</th>
            <td>@dropdown-split-toggle-icon__font-color-active</td>
            <td class="vars_value">@button-icon__active__font-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon active color</td>
        </tr>
        <tr>
            <th>@_icon-font-margin</th>
            <td>@dropdown-split-toggle-icon__font-margin</td>
            <td class="vars_value">@button-icon__margin</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon margin</td>
        </tr>
        <tr>
            <th>@_icon-font-position</th>
            <td>@dropdown-split-toggle-icon__position</td>
            <td class="vars_value">after</td>
            <td class="vars_value">before | after</td>
            <td>Split button drop-down toggle icon position</td>
        </tr>
        <tr>
            <th>@_icon-font-vertical-align</th>
            <td>@dropdown-split-toggle-icon__font-vertical-align</td>
            <td class="vars_value" nowrap="nowrap">@button-icon__vertical-align</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon vertical align</td>
        </tr>
        <tr>
            <th>@_icon-font-text-hide</th>
            <td>@dropdown-split-toggle-icon__text-hide</td>
            <td class="vars_value">@button-icon__text-hide</td>
            <td class="vars_value">true | false</td>
            <td>The text in the toggle tag is hidden</td>
        </tr>
    </table>
  </pre>

<h2 id="forms-variables">Forms variables</h2>
<h4 id="the-codelibformfieldsetcode-mixin-variables">The <code>.lib-form-fieldset()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_border</th>
            <td class="vars_value">@form-fieldset__border</td>
            <td class="vars_value">0</td>
            <td>Fieldset border</td>
        </tr>
        <tr>
            <th>@_margin</th>
            <td class="vars_value">@form-fieldset__margin</td>
            <td class="vars_value"> 0 0 @indent__xl</td>
            <td>Fieldset margin</td>
        </tr>
        <tr>
            <th>@_padding</th>
            <td class="vars_value">@form-fieldset__padding</td>
            <td class="vars_value">0</td>
            <td>Fieldset padding</td>
        </tr>
        <tr>
            <th>@_legend-color</th>
            <td class="vars_value">@form-fieldset-legend__color</td>
            <td class="vars_value">false</td>
            <td>Legend color</td>
        </tr>
        <tr>
            <th>@_legend-font-size</th>
            <td class="vars_value">@form-fieldset-legend__font-size</td>
            <td class="vars_value">20px</td>
            <td>Legend font size</td>
        </tr>
        <tr>
            <th>@_legend-font-family</th>
            <td class="vars_value">@form-fieldset-legend__font-family</td>
            <td class="vars_value">false</td>
            <td>Legend font family</td>
        </tr>
        <tr>
            <th>@_legend-font-weight</th>
            <td class="vars_value">@form-fieldset-legend__font-weight</td>
            <td class="vars_value">false</td>
            <td>Legend font weight</td>
        </tr>
        <tr>
            <th>@_legend-font-style</th>
            <td class="vars_value">@form-fieldset-legend__font-style</td>
            <td class="vars_value">false</td>
            <td>Legend font style</td>
        </tr>
        <tr>
            <th>@_legend-line-height</th>
            <td class="vars_value">@form-fieldset-legend__line-height</td>
            <td class="vars_value">1.2</td>
            <td>Legend line height</td>
        </tr>
        <tr>
            <th>@_legend-margin</th>
            <td class="vars_value">@form-fieldset-legend__margin</td>
            <td class="vars_value">0 0 @indent__m</td>
            <td>Legend margin</td>
        </tr>
        <tr>
            <th>@_legend-padding</th>
            <td class="vars_value">@form-fieldset-legend__padding</td>
            <td class="vars_value">0</td>
            <td>Legend padding</td>
        </tr>
        <tr>
            <th>@_legend-width</th>
            <td class="vars_value">@form-fieldset-legend__width</td>
            <td class="vars_value">false</td>
            <td>Legend width</td>
        </tr>
    </table>
  </pre>

<h4 id="the-codelibformfieldcode-mixin-variables">The <code>.lib-form-field()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default values [Allowed values]</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_type</th>
            <td class="vars_value">@form-field-type</td>
            <td class="vars_value">inline [inline | block]</td>
            <td>How to display from field element and its label. When set to 'inline' they are displayed side-by-side. When set to 'block' the label is displayed above the control</td>
        </tr>
        <tr>
            <th>@_border</th>
            <td class="vars_value">@form-field__border</td>
            <td class="vars_value">false</td>
            <td>Border of the &lt;div class=&quot;field&quot;&gt; element</td>
        </tr>
        <tr>
            <th>@_column</th>
            <td class="vars_value">@form-field-column</td>
            <td class="vars_value">false [true | false]</td>
            <td>Form fields are displayed in columns</td>
        </tr>
        <tr>
            <th>@_column-padding</th>
            <td class="vars_value">@form-field-column__padding</td>
            <td class="vars_value">0 12px 0 0</td>
            <td>Form fields column padding</td>
        </tr>
        <tr>
            <th>@_column-number</th>
            <td class="vars_value">@form-field-column__number</td>
            <td class="vars_value">2</td>
            <td>Form fields number of columns</td>
        </tr>
        <tr>
            <th>@_type-block-margin</th>
            <td class="vars_value">@form-field-type-block__margin</td>
            <td class="vars_value">0 0 @form-field__vertical-indent</td>
            <td>Form fields margin if @form-field-type set to is 'block'</td>
        </tr>
        <tr>
            <th>@_type-inline-margin</th>
            <td class="vars_value">@form-field-type-inline__margin</td>
            <td class="vars_value">0 0 @form-field__vertical-indent</td>
            <td>Form fields margin if @form-field-type is set to 'inline'</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Form field label</th>
        </tr>
        <tr>
            <th>@_label-color</th>
            <td class="vars_value">@form-field-label__align</td>
            <td class="vars_value">false</td>
            <td>Field label text color</td>
        </tr>
        <tr>
            <th>@_label-color</th>
            <td class="vars_value">@form-field-label__color</td>
            <td class="vars_value">false</td>
            <td>Field label text color</td>
        </tr>
        <tr>
            <th>@_label-font-size</th>
            <td class="vars_value">@form-field-label__font-size</td>
            <td class="vars_value">false</td>
            <td>Field label font size</td>
        </tr>
        <tr>
            <th>@_label-font-family</th>
            <td class="vars_value">@form-field-label__font-family</td>
            <td class="vars_value">false</td>
            <td>Field label font family</td>
        </tr>
        <tr>
            <th>@_label-font-weight</th>
            <td class="vars_value">@form-field-label__font-weight</td>
            <td class="vars_value">@font-weight__bold</td>
            <td>Field label font weight</td>
        </tr>
        <tr>
            <th>@_label-font-style</th>
            <td class="vars_value">@form-field-label__font-style</td>
            <td class="vars_value">false</td>
            <td>Field label font style</td>
        </tr>
        <tr>
            <th>@_label-line-height</th>
            <td class="vars_value">@form-field-label__line-height</td>
            <td class="vars_value">false</td>
            <td>Field label line height</td>
        </tr>
        <tr>
            <th>@_type-block-label-margin</th>
            <td class="vars_value">@form-field-type-label-block__margin</td>
            <td class="vars_value">0 0 @indent__xs</td>
            <td>Field label margin if @form-field-type is set to 'block'</td>
        </tr>
        <tr>
            <th>@_type-inline-label-padding</th>
            <td class="vars_value">@form-field-type-label-inline__padding</td>
            <td class="vars_value" nowrap>@form-field-type-label-inline__padding-top 15px 0 0</td>
            <td>Field label padding if @form-field-type is set to 'inline'</td>
        </tr>
        <tr>
            <th>@_type-inline-label-width</th>
            <td class="vars_value">@form-field-type-label-inline__width</td>
            <td class="vars_value">25.8%</td>
            <td>Field label width if @form-field-type is set to 'inline'</td>
        </tr>
        <tr>
            <th>@_type-inline-control-width</th>
            <td class="vars_value">@form-field-type-control-inline__width</td>
            <td class="vars_value">74.2%</td>
            <td>Field control width if @form-field-type is set to 'inline'</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Label &quot;required&quot; asterisk</th>
        </tr>
        <tr>
            <th>@_label-asterisk-color</th>
            <td class="vars_value">@form-field-label-asterisk__color</td>
            <td class="vars_value">#da370a</td>
            <td>Label asterisk color</td>
        </tr>
        <tr>
            <th>@_label-asterisk-font-size</th>
            <td class="vars_value">@form-field-label-asterisk__font-size</td>
            <td class="vars_value">@font-size__s</td>
            <td>Label asterisk font size</td>
        </tr>
        <tr>
            <th>@_label-asterisk-font-family</th>
            <td class="vars_value">@form-field-label-asterisk__font-family</td>
            <td class="vars_value">false</td>
            <td>Label asterisk font family</td>
        </tr>
        <tr>
            <th>@_label-asterisk-font-weight</th>
            <td class="vars_value">@form-field-label-asterisk__font-weight</td>
            <td class="vars_value">false</td>
            <td>Label asterisk font weight</td>
        </tr>
        <tr>
            <th>@_label-asterisk-font-style</th>
            <td class="vars_value">@form-field-label-asterisk__font-style</td>
            <td class="vars_value">false</td>
            <td>Label asterisk font style</td>
        </tr>
        <tr>
            <th>@_label-asterisk-line-height</th>
            <td class="vars_value">@form-field-label-asterisk__line-height</td>
            <td class="vars_value">false</td>
            <td>Label asterisk line height</td>
        </tr>
        <tr>
            <th>@_label-asterisk-margin</th>
            <td class="vars_value">@form-field-label-asterisk__margin</td>
            <td class="vars_value">0 0 0 @indent__xs</td>
            <td>Label asterisk margin</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Field note</th>
        </tr>
        <tr>
            <th>@_note-color</th>
            <td class="vars_value">@form-field-note__color</td>
            <td class="vars_value">false</td>
            <td>Field note text color</td>
        </tr>
        <tr>
            <th>@_note-font-size</th>
            <td class="vars_value">@form-field-note__font-size</td>
            <td class="vars_value">@font-size__s</td>
            <td>Field note font size</td>
        </tr>
        <tr>
            <th>@_note-font-family</th>
            <td class="vars_value">@form-field-note__font-family</td>
            <td class="vars_value">false</td>
            <td>Field note font family</td>
        </tr>
        <tr>
            <th>@_note-font-weight</th>
            <td class="vars_value">@form-field-note__font-weight</td>
            <td class="vars_value">false</td>
            <td>Field note font weight</td>
        </tr>
        <tr>
            <th>@_note-font-style</th>
            <td class="vars_value">@form-field-note__font-style</td>
            <td class="vars_value">false</td>
            <td>Field note font style</td>
        </tr>
        <tr>
            <th>@_note-line-height</th>
            <td class="vars_value">@form-field-note__line-height</td>
            <td class="vars_value">false</td>
            <td>Field note line height</td>
        </tr>
        <tr>
            <th>@_note-margin</th>
            <td class="vars_value">@form-field-note__margin</td>
            <td class="vars_value">3px 0 0</td>
            <td>Field note margin</td>
        </tr>
        <tr>
            <th>@_note-padding</th>
            <td class="vars_value">@form-field-note__padding</td>
            <td class="vars_value">0</td>
            <td>Field note padding</td>
        </tr>
        <tr>
            <th>@_note-icon-font-content</th>
            <td class="vars_value">@form-field-note-icon-font__content</td>
            <td class="vars_value">@icon-pointer-up</td>
            <td>Field note icon code</td>
        </tr>
        <tr>
            <th>@_note-icon-font</th>
            <td class="vars_value">@form-field-note-icon-font</td>
            <td class="vars_value">@icon-font</td>
            <td>Field note icon font</td>
        </tr>
        <tr>
            <th>@_note-icon-font-size</th>
            <td class="vars_value">@form-field-note-icon-font__size</td>
            <td class="vars_value">@form-field-note__font-size*2</td>
            <td>Field note icon font size</td>
        </tr>
        <tr>
            <th>@_note-icon-font-line-height</th>
            <td class="vars_value">@form-field-note-icon-font__line-height</td>
            <td class="vars_value">@form-field-note__font-size</td>
            <td>Field note icon line height</td>
        </tr>
        <tr>
            <th>@_note-icon-font-color</th>
            <td class="vars_value">@form-field-note-icon-font__color</td>
            <td class="vars_value">@form-field-note__color</td>
            <td>Field note icon color</td>
        </tr>
        <tr>
            <th>@_note-icon-font-color-hover</th>
            <td class="vars_value">@form-field-note-icon-font__color-hover</td>
            <td class="vars_value">false</td>
            <td>Field note icon hovered color</td>
        </tr>
        <tr>
            <th>@_note-icon-font-color-active</th>
            <td class="vars_value">@form-field-note-icon-font__color-active</td>
            <td class="vars_value">false</td>
            <td>Field note icon active color</td>
        </tr>
        <tr>
            <th>@_note-icon-font-margin</th>
            <td class="vars_value">@form-field-note-icon-font__margin</td>
            <td class="vars_value">false</td>
            <td>Field note icon margin</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_note-icon-font-vertical-align</th>
            <td class="vars_value" nowrap="nowrap">@form-field-note-icon-font__vertical-align</td>
            <td class="vars_value">@icon-font__vertical-align</td>
            <td>Field note icon vertical align</td>
        </tr>
        <tr>
            <th>@_note-icon-font-position</th>
            <td class="vars_value">@form-field-note-icon-font__position</td>
            <td class="vars_value">@icon-font__position [before | after]</td>
            <td>Field note icon position</td>
        </tr>
        <tr>
            <th>@_note-icon-font-text-hide</th>
            <td class="vars_value">@form-field-note-icon-font__text-hide</td>
            <td class="vars_value">@icon-font__text-hide [true | false]</td>
            <td>Field note icon text hide</td>
        </tr>
    </table>
  </pre>

<h4 id="the-codelibformhasrequiredcode-mixin-variables">The <code>.lib-form-hasrequired()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default values [Allowed values]</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_position</th>
            <td class="vars_value">@form-hasrequired__position</td>
            <td class="vars_value">top [top | bottom]</td>
            <td>Position of &quot;required fields&quot; notice</td>
        </tr>
        <tr>
            <th>@_color</th>
            <td class="vars_value">@form-hasrequired__color</td>
            <td class="vars_value">@form-field-label-asterisk__color</td>
            <td>Text color of &quot;required fields&quot; notice</td>
        </tr>
        <tr>
            <th>@_font-size</th>
            <td class="vars_value">@form-hasrequired__font-size</td>
            <td class="vars_value">@font-size__s</td>
            <td>Font size of &quot;required fields&quot; notice</td>
        </tr>
        <tr>
            <th>@_font-family</th>
            <td class="vars_value">@form-hasrequired__font-family</td>
            <td class="vars_value">false</td>
            <td>Font family of &quot;required fields&quot; notice</td>
        </tr>
        <tr>
            <th>@_font-weight</th>
            <td class="vars_value">@form-hasrequired__font-weight</td>
            <td class="vars_value">false</td>
            <td>Font weight of &quot;required fields&quot; notice</td>
        </tr>
        <tr>
            <th>@_font-style</th>
            <td class="vars_value">@form-hasrequired__font-style</td>
            <td class="vars_value">false</td>
            <td>Font style of &quot;required fields&quot; notice</td>
        </tr>
        <tr>
            <th>@_line-height</th>
            <td class="vars_value">@form-hasrequired__line-height</td>
            <td class="vars_value">false</td>
            <td>Line height of &quot;required fields&quot; notice</td>
        </tr>
        <tr>
            <th>@_border</th>
            <td class="vars_value">@form-hasrequired__border</td>
            <td class="vars_value">false</td>
            <td>Border of &quot;required fields&quot; notice</td>
        </tr>
        <tr>
            <th>@_margin</th>
            <td class="vars_value">@form-hasrequired__margin</td>
            <td class="vars_value">@indent__s 0 0</td>
            <td>Margin of &quot;required fields&quot; notice</td>
        </tr>
        <tr>
            <th>@_padding</th>
            <td class="vars_value">@form-hasrequired__padding</td>
            <td class="vars_value">false</td>
            <td>Padding of &quot;required fields&quot; notice</td>
        </tr>
    </table>
  </pre>

<h4 id="the-codelibformelementinputcoed-mixin-variables">The <code>.lib-form-element-input()</coed> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value [Allowed value]</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_type</th>
            <td class="vars_value">@form-element-input-type</td>
            <td class="vars_value">'' [input-text | select | textarea | input-radio | input-checkbox]</td>
            <td>Form control type.<br/><b>@form-element-input__[]</b> global variables are used to set up all form elements style. Control-specific global variables use these <b>@form-element-input__[]</b> variables by default. Control-specific global variables can be set up separately.<br/><b>@input-text__[]</b> is used to set up input-text controls style<br/><b>@select__[]</b> is used to set up selects style<br/><b>@textarea__[]</b> is used to set up textarea style</td>
        </tr>
        <tr>
            <th>@_background</th>
            <td class="vars_value">@form-element-input__background<br/>@input-text__background<br/>@selectbackground<br/>@textarea__background</td>
            <td class="vars_value">@color-white<br/>@form-element-input__background<br/>@form-element-input__background<br/>@form-element-input__background</td>
            <td>Form control background</td>
        </tr>
        <tr>
            <th>@_border</th>
            <td class="vars_value">@form-element-input__border<br/>@input-text__border<br/>@select__border<br/>@textarea__border</td>
            <td class="vars_value" nowrap="nowrap">1px solid @form-element-input__border-color<br/>@form-element-input__border<br/>@form-element-input__border<br/>@form-element-input__border</td>
            <td>Form control border</td>
        </tr>
        <tr>
            <th>@_border-radius</th>
            <td class="vars_value" nowrap="nowrap">@form-element-input__border-radius<br/>@input-textborder-radius<br/>@select__border-radius<br/>@textarea__border-radius</td>
            <td class="vars_value">1px<br/>@form-element-input__border-radius<br/>@form-element-input__border-radius<br/>@form-element-input__border-radius</td>
            <td>Form control border radius</td>
        </tr>
        <tr>
            <th>@_height</th>
            <td class="vars_value">@form-element-input__height<br/>@input-text__height<br/>@select__height<br/>@textarea__height</td>
            <td class="vars_value">32px<br/>@form-element-input__height<br/>@form-element-input__height<br/>auto</td>
            <td>Form control height</td>
        </tr>
        <tr>
            <th>@_width</th>
            <td class="vars_value">@form-element-input__width<br/>@input-text__width<br/>@select__width<br/>@textarea__width</td>
            <td class="vars_value">100%<br/>@form-element-input__width<br/>@form-element-input__width<br/>@form-element-input__width</td>
            <td>Form control width</td>
        </tr>
        <tr>
            <th>@_margin</th>
            <td class="vars_value">@form-element-input__margin<br/>@input-text__margin<br/>@select__margin<br/>@textarea__margin</td>
            <td class="vars_value">false [true | false]<br/>@form-element-input__margin<br/>@form-element-input__margin<br/>0</td>
            <td>Form control margin</td>
        </tr>
        <tr>
            <th>@_padding</th>
            <td class="vars_value">@form-element-input__padding<br/>@input-text__padding <br/>@select__padding<br/>@textarea__padding</td>
            <td class="vars_value">0 9px<br/>@form-element-input__padding<br/>5px 10px 4px<br/>@indent__s</td>
            <td>Form control padding</td>
        </tr>
        <tr>
            <th>@_vertical-align</th>
            <td class="vars_value">@form-element-input__vertical-align<br/>@input-text__vertical-align<br/>@select__vertical-align<br/>@textarea__vertical-align</td>
            <td class="vars_value">baseline<br/>@form-element-input__vertical-align<br/>@form-element-input__vertical-align<br/>@form-element-input__vertical-align</td>
            <td>Form control vertical align</td>
        </tr>
        <tr>
            <th>@_background-clip</th>
            <td class="vars_value">@form-element-input__background-clip<br/><br/>@input-text__background-clip<br/>@select__background-clip<br/>@textarea__background-clip</td>
            <td class="vars_value">padding-box<br/>[padding-box | border-box | content-box]<br/>@form-element-input__background-clip<br/>@form-element-input__background-clip<br/>@form-element-input__background-clip</td>
            <td>Form control background clip</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Text settings</th>
        </tr>
        <tr>
            <th>@_color</th>
            <td class="vars_value">@form-element-input__color<br/>@input-text__color<br/>@select__color<br/>@textarea__color</td>
            <td class="vars_value">false<br/>@form-element-input__color<br/>@form-element-input__color<br/>@form-element-input__color</td>
            <td>Form control text color</td>
        </tr>
        <tr>
            <th>@_font-size</th>
            <td class="vars_value">@form-element-input__font-size<br/>@input-text__font-size<br/>@select__font-size<br/>@textarea__font-size</td>
            <td class="vars_value">@font-size__base<br/>@form-element-input__font-size<br/>@form-element-input__font-size<br/>@form-element-input__font-size</td>
            <td>Form control font size</td>
        </tr>
        <tr>
            <th>@_font-family</th>
            <td class="vars_value">@form-element-input__font-family<br/>@input-text__font-family<br/>@select__font-family<br/>@textarea__font-family</td>
            <td class="vars_value">@font-family__base<br/>@form-element-input__font-family<br/>@form-element-input__font-family<br/>@form-element-input__font-family</td>
            <td>Form control font family</td>
        </tr>
        <tr>
            <th>@_font-weight</th>
            <td class="vars_value">@form-element-input__font-weight<br/>@input-text__font-weight<br/>@select__font-weight<br/>@textarea__font-weight</td>
            <td class="vars_value">false<br/>@form-element-input__font-weight<br/>@form-element-input__font-weight<br/>@form-element-input__font-weight</td>
            <td>Form control font weight</td>
        </tr>
        <tr>
            <th>@_font-style</th>
            <td class="vars_value">@form-element-input__font-style<br/>@input-text__font-style<br/>@selectfont-style<br/>@textarea__font-style</td>
            <td class="vars_value">false<br/>@form-element-input__font-style<br/>@form-element-input__font-style<br/>@form-element-input__font-style</td>
            <td>Form control font style</td>
        </tr>
        <tr>
            <th>@_line-height</th>
            <td class="vars_value">@form-element-input__line-height<br/>@input-text__line-height<br/>@select__line-height<br/>@textarea__line-height</td>
            <td class="vars_value">@line-height__base<br/>@form-element-input__line-height<br/>@form-element-input__line-height<br/>@form-element-input__line-height</td>
            <td>Form control line height</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Placeholder</th>
        </tr>
        <tr>
            <th>@_placeholder-color</th>
            <td class="vars_value">@form-element-input-placeholder__color<br/>@input-text-placeholder__color<br/>@select-placeholder__color<br/>@textarea-placeholder__color</td>
            <td class="vars_value">#c2c2c2<br/>@form-element-input-placeholder__color<br/>@form-element-input-placeholder__color<br/>@form-element-input-placeholder__color</td>
            <td>Form control placeholder color</td>
        </tr>
        <tr>
            <th nowrap>@_placeholder-font-style</th>
            <td class="vars_value" nowrap="nowrap">@form-element-input-placeholder__font-style<br/>@inputtext-placeholder-font-style<br/>@select-placeholder__font-style<br/>@textarea-placeholder__font-style</td>
            <td class="vars_value">@form-element-input__font-style<br/>@form-element-input-placeholder__font-style<br/>@form-element-input-placeholder__font-style<br/>@form-element-input-placeholder__font-style</td>
            <td>Form control placeholder font style</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Disabled element</th>
        </tr>
        <tr>
            <th>@_disabled-background</th>
            <td class="vars_value" nowrap="nowrap">@form-element-input__disabled__background<br/>@inputtextdisabled-background<br/>@select__disabled__background<br/>@textarea__disabled__background</td>
            <td class="vars_value">@form-element-input__background<br/>@form-element-input__disabled__background<br/>@form-element-input__disabled__background<br/>@form-element-input__disabled__background</td>
            <td>Disabled form element background</td>
        </tr>
        <tr>
            <th>@_disabled-border</th>
            <td class="vars_value">@form-element-input__disabled__border<br/>@input-text__disabled__border<br/>@select__disabled__border<br/>@textarea__disabled__border</td>
            <td class="vars_value">@form-element-input__border<br/>@form-element-input__disabled__border<br/>@form-element-input__disabled__border<br/>@form-element-input__disabled__border</td>
            <td>Disabled form element border</td>
        </tr>
        <tr>
            <th>@_disabled-opacity</th>
            <td class="vars_value">@form-element-input__disabled__opacity<br/>@input-text__disabled__opacity<br/>@select__disabled__opacity<br/>@textarea__disabled__opacity</td>
            <td class="vars_value">.5<br/>@form-element-input__disabled__opacity<br/>@form-element-input__disabled__opacity<br/>@form-element-input__disabled__opacity</td>
            <td>Disabled form element opacity</td>
        </tr>
        <tr>
            <th>@_disabled-color</th>
            <td class="vars_value">@form-element-input__disabled__color<br/>@input-text__disabled__color<br/>@select__disabled__color<br/>@textarea__disabled__color</td>
            <td class="vars_value">@form-element-input__color<br/>@form-element-input__disabled__color<br/>@form-element-input__disabled__color<br/>@form-element-input__disabled__color</td>
            <td>Disabled form element text color</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_disabled-font-style</th>
            <td class="vars_value">@form-element-input__disabled__font-style<br/>@input-text__disabled__font-style<br/>@select__disabled__font-style<br/>@textarea__disabled__font-style</td>
            <td class="vars_value">@form-element-input__font-style<br/>@form-element-input__disabled__font-style<br/>@form-element-input__disabled__font-style<br/>@form-element-input__disabled__font-style</td>
            <td>Disabled form element font style</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Focused elements</th>
        </tr>
        <tr>
            <th>@_focus-background</th>
            <td class="vars_value">@form-element-input__focus__background<br/>@input-text__focus__background<br/>@select__focus__background<br/>@textarea__focus__background</td>
            <td class="vars_value">@form-element-input__background<br/>@form-element-input__focus__background<br/>@form-element-input__focus__background<br/>@form-element-input__focus__background</td>
            <td>Focused form element background</td>
        </tr>
        <tr>
            <th>@_focus-border</th>
            <td class="vars_value">@form-element-input__focus__border<br/>@input-text__focus__border<br/>@select__focus__border<br/>@textarea__focus__border</td>
            <td class="vars_value">@form-element-input__border<br/>@form-element-input__focus__border<br/>@form-element-input__focus__border<br/>@form-element-input__focus__border</td>
            <td>Focused form element border</td>
        </tr>
        <tr>
            <th>@_focus-color</th>
            <td class="vars_value">@form-element-input__focus__color<br/>@input-text__focus__color<br/>@select__focus__color<br/>@textarea__focus__color</td>
            <td class="vars_value">@form-element-input__color<br/>@form-element-input__focus__color<br/>@form-element-input__focus__color<br/>@form-element-input__focus__color</td>
            <td>Focused form element color</td>
        </tr>
        <tr>
            <th>@_focus-font-style</th>
            <td class="vars_value">@form-element-input__focus__font-style<br/>@input-text__focus__font-style<br/>@select__focus__font-style<br/>@textarea__focus__font-style</td>
            <td class="vars_value">@form-element-input__font-style<br/>@form-element-input__focus__font-style<br/>@form-element-input__focus__font-style<br/>@form-element-input__focus__font-style</td>
            <td>Focused form element font style</td>
        </tr>
    </table>
  </pre>

<h4 id="the-codelibformelementchoisecode-mixin-variables">The <code>.lib-form-element-choise()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default values [Allowed values]</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_type</th>
            <td class="vars_value">@form-element-choice__type</td>
            <td class="vars_value">'' ['' | radio | checkbox]</td>
            <td>Choice element type</td>
        </tr>
        <tr>
            <th>@_vertical-align</th>
            <td class="vars_value">@form-element-choice__vertical-align<br>@input-radio__vertical-align<br>@input-checkbox__vertical-align</td>
            <td class="vars_value">false<br/>@form-element-choice__vertical-align<br/>@form-element-choice__vertical-align</td>
            <td>Choice element vertical align</td>
        </tr>
        <tr>
            <th>@_margin</th>
            <td class="vars_value">@form-element-choice__margin<br>@input-radio__margin<br>@input-checkbox__margin</td>
            <td class="vars_value">2px @indent__xs 0 0<br/>@form-element-choice__margin<br/>@form-element-choice__margin</td>
            <td>Choice element margin</td>
        </tr>
        <tr>
            <th>@_disabled-opacity</th>
            <td class="vars_value">@form-element-choice__disabled__opacity<br>@input-radio__disabled__opacity<br>@input-checkbox__disabled__opacity</td>
            <td class="vars_value">@form-element-input__disabled__opacity<br/>@form-element-choice__disabled__opacity<br/>@form-element-choice__disabled__opacity</td>
            <td>Disabled choice element opacity</td>
        </tr>
    </table>
  </pre>

<h4 id="the-codelibformvalidationnotecode-mixin">The <code>.lib-form-validation-note()</code> mixin</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default values [Allowed values]</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_note-color</th>
            <td class="vars_value">@form-validation-note__color-error</td>
            <td class="vars_value">@error__color</td>
            <td>Validation note text color</td>
        </tr>
        <tr>
            <th>@_note-font-size</th>
            <td class="vars_value">@form-validation-note__font-size</td>
            <td class="vars_value">@font-size__s</td>
            <td>Validation note font size</td>
        </tr>
        <tr>
            <th>@_note-font-family</th>
            <td class="vars_value">@form-validation-note__font-family</td>
            <td class="vars_value">false</td>
            <td>Validation note font family</td>
        </tr>
        <tr>
            <th>@_note-font-style</th>
            <td class="vars_value">@form-validation-note__font-style</td>
            <td class="vars_value">false</td>
            <td>Validation note font style</td>
        </tr>
        <tr>
            <th>@_note-font-weight</th>
            <td class="vars_value">@form-validation-note__font-weight</td>
            <td class="vars_value">false</td>
            <td>Validation note font weight</td>
        </tr>
        <tr>
            <th>@_note-line-height</th>
            <td class="vars_value">@form-validation-note__line-height</td>
            <td class="vars_value">false</td>
            <td>Validation note line height</td>
        </tr>
        <tr>
            <th>@_note-margin</th>
            <td class="vars_value">@form-validation-note__margin</td>
            <td class="vars_value">3px 0 0</td>
            <td>Validation note margin</td>
        </tr>
        <tr>
            <th>@_note-padding</th>
            <td class="vars_value">@form-validation-note__padding</td>
            <td class="vars_value">false</td>
            <td>Validation note padding</td>
        </tr>
        <tr>
            <th>@_note-icon-use</th>
            <td class="vars_value">@form-validation-note-icon__use</td>
            <td class="vars_value">false [true | false]</td>
            <td>Show validation note icon</td>
        </tr>
        <tr>
            <th>@_note-icon-font-content</th>
            <td class="vars_value">@form-validation-note-icon__font-content</td>
            <td class="vars_value">@icon-pointer-up</td>
            <td>Validation note icon code</td>
        </tr>
        <tr>
            <th>@_note-icon-font</th>
            <td class="vars_value">@form-validation-note-icon__font</td>
            <td class="vars_value">@icon-font</td>
            <td>Validation note icon font</td>
        </tr>
        <tr>
            <th>@_note-icon-font-size</th>
            <td class="vars_value">@form-validation-note-icon__font-size</td>
            <td class="vars_value">@form-validation-note__font-size * 2</td>
            <td>Validation note icon font size</td>
        </tr>
        <tr>
            <th>@_note-icon-font-line-height</th>
            <td class="vars_value">@form-validation-note-icon__font-line-height</td>
            <td class="vars_value">@form-validation-note__font-size</td>
            <td>Validation note icon line height</td>
        </tr>
        <tr>
            <th>@_note-icon-font-color</th>
            <td class="vars_value">@form-validation-note-icon__font-color</td>
            <td class="vars_value">@form-validation-note__color-error</td>
            <td>Validation note icon color</td>
        </tr>
        <tr>
            <th>@_note-icon-font-color-hover</th>
            <td class="vars_value">@form-validation-note-icon__font-color-hover</td>
            <td class="vars_value">false</td>
            <td>Hovered validation note icon color</td>
        </tr>
        <tr>
            <th>@_note-icon-font-color-active</th>
            <td class="vars_value">@form-validation-note-icon__font-color-active</td>
            <td class="vars_value">false</td>
            <td>Active validation note icon color</td>
        </tr>
        <tr>
            <th>@_note-icon-font-margin</th>
            <td class="vars_value">@form-validation-note-icon__font-margin</td>
            <td class="vars_value">false</td>
            <td>Validation note icon margin</td>
        </tr>
        <tr>
            <th>@_note-icon-font-vertical-align</th>
            <td class="vars_value">@form-validation-note-icon__font-vertical-align</td>
            <td class="vars_value">@icon-font__vertical-align</td>
            <td>Validation note icon vertical align</td>
        </tr>
        <tr>
            <th>@_note-icon-font-position</th>
            <td class="vars_value">@form-validation-note-icon__font-position</td>
            <td class="vars_value">@icon-font__position</td>
            <td>Validation note icon position</td>
        </tr>
        <tr>
            <th>@_note-icon-font-text-hide</th>
            <td class="vars_value">@form-validation-note-icon__font-text-hide</td>
            <td class="vars_value">@icon-font__text-hide</td>
            <td>Validation note icon text hide</td>
        </tr>
    </table>
  </pre>

<h2 id="font-icon-variables">Font icon variables</h2>
<h4 id="the-codelibiconfontcode-mixin-variables">The <code>.lib-icon-font()</code> mixin variables</h4>
  <pre>
    <table>
      <tr>
        <th class="vars_head">Mixin variable</th>
        <th class="vars_head">Global variable</th>
        <th class="vars_head">Default value</th>
        <th class="vars_head">Allowed values</th>
        <th class="vars_head">Comment</th>
      </tr>
      <tr>
        <th>@_icon-font-content</th>
        <td>-</td>
        <td class="vars_value">&nbsp;</td>
        <td class="vars_value">'' | icon code | icon variables</td>
        <td>Font icon code</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_icon-font</th>
        <td>@icon-font</td>
        <td class="vars_value">@icons__font-name</td>
        <td class="vars_value">'' | false | value</td>
        <td>The icon font</td>
      </tr>
      <tr>
        <th>@_icon-font-size</th>
        <td>@icon-font__size</td>
        <td class="vars_value">inherit</td>
        <td class="vars_value">'' | false | value</td>
        <td>Font icon size</td>
      </tr>
      <tr>
        <th>@_icon-font-line-height</th>
        <td>@icon-font__line-height</td>
        <td class="vars_value">@icon-font__size</td>
        <td class="vars_value">'' | false | value</td>
        <td>Font icon line height</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_icon-font-color</th>
        <td>@icon-font__color</td>
        <td class="vars_value">inherit</td>
        <td class="vars_value">'' | inherit | color code</td>
        <td>Font icon color</td>
      </tr>
      <tr>
        <th>@_icon-font-color-hover</th>
        <td>@icon-font__color-hover</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | inherit | color code</td>
        <td>Font icon color - hover state</td>
      </tr>
      <tr>
        <th>@_icon-font-color-active</th>
        <td>@icon-font__color-active</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | inherit | color code</td>
        <td>Font icon color - active state</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_icon-font-margin</th>
        <td>@icon-font__margin</td>
        <td class="vars_value">@icon__margin</td>
        <td class="vars_value">'' | false | value</td>
        <td>Font icon margin</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_icon-font-vertical-align</th>
        <td>@icon-font__vertical-align</td>
        <td class="vars_value" nowrap="nowrap">@icon__vertical-align</td>
        <td class="vars_value">'' | false | value</td>
        <td>Font icon vertical align</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_icon-font-position</th>
        <td>@icon-font__position</td>
        <td class="vars_value">@icon__position</td>
        <td class="vars_value">before | after</td>
        <td>Font icon position</td>
      </tr>
      <tr>
        <th>@_icon-font-text-hide</th>
        <td>@icon-font__text-hide</td>
        <td class="vars_value">@icon__text-hide</td>
        <td class="vars_value">true | false</td>
        <td>The text of the element is replaced with the icon(true), or the icon is on the side of the text (false)</td>
      </tr>
      <tr>
        <th>@_icon-font-display</th>
        <td>@icon-font__display</td>
        <td class="vars_value">inline-block</td>
        <td class="vars_value">'' | false | value</td>
        <td>The 'display' property of the icon container</td>
      </tr>
    </table>
  </pre>

<h2 id="icon-with-image-or-sprite-variables">Icon with image or sprite variables</h2>
<h4 id="the-codelibiconimagecode-mixin-variables">The <code>.lib-icon-image()</code> mixin variables</h4>
  <pre>
    <table>
      <tr>
        <th class="vars_head">Mixin variable</th>
        <th class="vars_head">Global variable</th>
        <th class="vars_head">Default value</th>
        <th class="vars_head">Allowed values</th>
        <th class="vars_head">Comment</th>
      </tr>
      <tr>
        <th>@_icon-image</th>
        <td></td>
        <td class="vars_value">-</td>
        <td class="vars_value">'' | false | value</td>
        <td>A link to an image or sprite, mandatory parameter</td>
      </tr>
      <tr>
        <th>@_icon-image-height</th>
        <td>@icon__height</td>
        <td class="vars_value">26px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Icon image height</td>
      </tr>
      <tr>
        <th>@_icon-image-width</th>
        <td>@icon__width</td>
        <td class="vars_value">26px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Icon image width</td>
      </tr>
      <tr>
        <th>@_icon-image-margin</th>
        <td>@icon__margin</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Icon image margin</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_icon-image-vertical-align</th>
        <td>@icon__vertical-align</td>
        <td class="vars_value">middle</td>
        <td class="vars_value">'' | false | value</td>
        <td>Icon image vertical align</td>
      </tr>
      <tr>
        <th>@_icon-image-position-x</th>
        <td>@icon-image__position-x</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Horizontal image position</td>
      </tr>
      <tr>
        <th>@_icon-image-position-y</th>
        <td>@icon-image__position-y</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Vertical image position</td>
      </tr>
      <tr>
        <th>@_icon-image-position</th>
        <td>@icon__position</td>
        <td class="vars_value">before</td>
        <td class="vars_value">before | after</td>
        <td>Icon image position</td>
      </tr>
      <tr>
        <th>@_icon-image-text-hide</th>
        <td>@icon__text-hide</td>
        <td class="vars_value">false</td>
        <td class="vars_value">true | false</td>
        <td>The text in the &lt;span&gt; tag should be hidden</td>
      </tr>
    </table>
  </pre>

<h2 id="icon-position-for-an-icon-with-image-or-sprite-variables">Icon position for an icon with image or sprite variables</h2>
<h4 id="the-codelibiconimagepositioncode-mixin-variables">The <code>.lib-icon-image-position()</code> mixin variables</h4>
  <pre>
    <table>
      <tr>
        <th class="vars_head">Mixin variable</th>
        <th class="vars_head">Global variable</th>
        <th class="vars_head">Default value</th>
        <th class="vars_head">Allowed values</th>
        <th class="vars_head">Comment</th>
      </tr>
      <tr>
        <th>@_icon-image-position-x</th>
        <td>@icon-image__position-x</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Horizontal starting position of icon image</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_icon-image-position-y</th>
        <td>@icon-image__position-y</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Vertical starting position of icon image</td>
      </tr>
      <tr>
        <th>@_icon-image-position</th>
        <td>-</td>
        <td class="vars_value">-</td>
        <td class="vars_value">before | after</td>
        <td>Position of the icon which is set for the element</td>
      </tr>
    </table>
  </pre>

<h2 id="icon-sprite-position-variables">Icon sprite position variables</h2>
<h4 id="the-codelibiconspritepositioncode-mixin-variables">The <code>.lib-icon-sprite-position()</code> mixin variables</h4>
  <pre>
    <table>
    <tr>
        <th class="vars_head">Mixin variable</th>
        <th class="vars_head">Global variable</th>
        <th class="vars_head">Default value</th>
        <th class="vars_head">Allowed values</th>
        <th class="vars_head">Comment</th>
      </tr>
      <tr>
        <th>@_icon-sprite-position-x</th>
        <td>@icon-sprite__position-x</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>The x coordinate of the desired image on the grid</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_icon-sprite-position-y</th>
        <td>@icon-sprite__position-y</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>The y coordinate of the desired image on the grid</td>
      </tr>
      <tr>
        <th>@_icon-sprite-grid</th>
        <td>@icon-sprite__grid</td>
        <td class="vars_value">26px</td>
        <td class="vars_value">'' | false | value</td>
        <td>The size of the grid (in pixels) that the individal images are placed on</td>
      </tr>
      <tr>
        <th>@_icon-sprite-position</th>
        <td>@icon__position</td>
        <td class="vars_value">before</td>
        <td class="vars_value">before | after</td>
        <td>Icon image position</td>
      </tr>
    </table>
  </pre>

<h2 id="imagesprite-icon-size-variables">Image/sprite icon size variables</h2>
<h4 id="the-codelibiconimagesizecode-mixin-variables">The <code>.lib-icon-image-size()</code> mixin variables</h4>
  <pre>
    <table>
      <tr>
        <th class="vars_head">Mixin variable</th>
        <th class="vars_head">Global variable</th>
        <th class="vars_head">Default value</th>
        <th class="vars_head">Allowed values</th>
        <th class="vars_head">Comment</th>
      </tr>
      <tr>
        <th>@_icon-image-width</th>
        <td>@icon__width</td>
        <td class="vars_value">26px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Icon image width</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_icon-image-height</th>
        <td>@icon__height</td>
        <td class="vars_value">26px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Icon image height</td>
      </tr>
      <tr>
        <th>@_icon-image-position</th>
        <td>@icon__position</td>
        <td class="vars_value">before</td>
        <td class="vars_value">before | after</td>
        <td>Icon image position</td>
      </tr>
    </table>
  </pre>

<h2 id="layout-variables">Layout variables</h2>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Variables list names</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@layout__width</th>
            <td class="vars_value">''</td>
            <td class="vars_value">'' | false | value</td>
            <td>Page minimum width</td>
        </tr>
        <tr>
            <th>@layout__max-width</th>
            <td class="vars_value">1280px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Page maximum width</td>
        </tr>
        <tr>
            <th>@layout-indent__width</th>
            <td class="vars_value">20px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Page indents on the left and right</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Class names defining different layouts</th>
        </tr>
        <tr>
            <th>@layout-class-1column</th>
            <td class="vars_value">page-layout-1column</td>
            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
            <td>Class name for one column layout</td>
        </tr>
        <tr>
            <th>@layout-class-2columns__left</th>
            <td class="vars_value">page-layout-2columns-left</td>
            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
            <td>Class name for two columns layout with left sidebar</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@layout-class-2columns__right</th>
            <td class="vars_value">page-layout-2columns-right</td>
            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
            <td>Class name for two columns layout with right sidebar</td>
        </tr>
        <tr>
            <th>@layout-class-3columns</th>
            <td class="vars_value">page-layout-3columns</td>
            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
            <td>Class name for three columns layout with left sidebar</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Variables used for layout grid</th>
        </tr>
        <tr>
            <th>@total-columns</th>
            <td class="vars_value">12</td>
            <td class="vars_value">'' | false | value</td>
            <td>Number of total columns in layout (i.e. <em>1, 2, 3</em>)</td>
        </tr>
        <tr>
            <th>@gutter-width</th>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | value</td>
            <td>Distanse between columns</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Variables for layout columns</th>
        </tr>
        <tr>
            <th>@layout-column__width</th>
            <td class="vars_value">@total-columns</td>
            <td class="vars_value">'' | false | value</td>
            <td>Sets base columns number</td>
        </tr>
        <tr>
            <th>@layout-column__sidebar-width</th>
            <td class="vars_value">2</td>
            <td class="vars_value">'' | false | value</td>
            <td>Sets sidebar width</td>
        </tr>
        <tr>
            <th>@layout-column__left-width</th>
            <td class="vars_value">@layout-column__sidebar-width</td>
            <td class="vars_value">'' | false | value</td>
            <td>Sets left column width</td>
        </tr>
        <tr>
            <th>@layout-column__right-width</th>
            <td class="vars_value">@layout-column__sidebar-width</td>
            <td class="vars_value">'' | false | value</td>
            <td>Sets right column width</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Variables for layout columns depending on layout used</th>
        </tr>
        <tr>
            <th>@layout-column-main__width-1</th>
            <td class="vars_value">100%</td>
            <td class="vars_value">'' | false | value</td>
            <td>Sets one column width</td>
        </tr>
        <tr>
            <th>@layout-column-main__width-2-left</th>
            <td class="vars_value">@layout-column__width - @layout-column__left-width</td>
            <td class="vars_value">'' | false | value</td>
            <td>Sets left column width</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@layout-column-main__width-2-right</th>
            <td class="vars_value">@layout-column__width - @layout-column__right-width</td>
            <td class="vars_value">'' | false | value</td>
            <td>Sets right column width</td>
        </tr>
        <tr>
            <th>@layout-column-main__width-3</th>
            <td class="vars_value">@layout-column__width - @layout-column__left-width - @layout-column__right-width</td>
            <td class="vars_value">'' | false | value</td>
            <td>Sets three columns layout main column width</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Settings variables</th>
        </tr>
        <tr>
            <th>@use-flex</th>
            <td class="vars_value">true</td>
            <td class="vars_value">'' | true | false</td>
            <td>Sets compatibility for browsers not supporting flex</td>
        </tr>
        <tr>
            <th>@responsive</th>
            <td class="vars_value">true</td>
            <td class="vars_value">'' | true | false</td>
            <td>Is set to true if theme has responsive layout</td>
        </tr>
    </table>
  </pre>

<h2 id="loader-variables">Loader variables</h2>
<h4 id="the-codelibloadercode-mixin-variables">The <code>.lib-loader()</code> mixin variables</h4>
  <pre>
    <table>
      <tr>
        <th class="vars_head">Mixin variable</th>
        <th class="vars_head">Global variable</th>
        <th class="vars_head">Default value</th>
        <th class="vars_head">Allowed values</th>
        <th class="vars_head">Comment</th>
      </tr>
      <tr>
        <th>@_loader-overlay-background-color</th>
        <td>@loader-overlay__background-color</td>
        <td class="vars_value">rgba(255, 255, 255, .5)</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loader overlay background color</td>
      </tr>
      <tr>
        <th>@_loader-overlay-z-index</th>
        <td>@loader-overlay__z-index</td>
        <td class="vars_value">9999</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loader overlay background z-index</td>
      </tr>
      <tr>
        <th>@_loader-icon-width</th>
        <td>@loader-icon__width</td>
        <td class="vars_value">160px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loader icon width</td>
      </tr>
      <tr>
        <th>@_loader-icon-height</th>
        <td>@loader-icon__height</td>
        <td class="vars_value">160px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loader icon height</td>
      </tr>
      <tr>
        <th>@_loader-icon-background-color</th>
        <td>@loader-icon__background-color</td>
        <td class="vars_value">transparent</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loader icon background color</td>
      </tr>
      <tr>
        <th>@_loader-icon-background-image</th>
        <td>@loader-icon__background-image</td>
        <td class="vars_value">url('@{baseDir}images/loader-2.gif')</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loader icon ackground image</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_loader-icon-background-position</th>
        <td>@loader-icon__background-position</td>
        <td class="vars_value">50% 50%</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loader icon background position</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_loader-icon-border-radius</th>
        <td>@loader-icon__border-radius</td>
        <td class="vars_value">5px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loader icon border radius</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_loader-icon-padding</th>
        <td>@loader-icon__padding</td>
        <td class="vars_value">''</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loader icon icon padding</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_loader-text</th>
        <td>@loader-text</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loader text presence</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_loader-text-color</th>
        <td>@loader-text__color</td>
        <td class="vars_value">@primary__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loader text color</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_loader-text-font-size</th>
        <td>@loader-text__font-size</td>
        <td class="vars_value">@font-size__base</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loader text font size</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_loader-text-font-family</th>
        <td>@loader-text__font-family</td>
        <td class="vars_value">@font-family__base</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loader text font family</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_loader-text-font-weight</th>
        <td>@loader-text__font-weight</td>
        <td class="vars_value">@font-weight__regular</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loader text font weight</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_loader-text-font-style</th>
        <td>@loader-text__font-style</td>
        <td class="vars_value">@font-style__base</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loader text font style</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_loader-text-padding</th>
        <td>@loader-text__padding</td>
        <td class="vars_value">130px 0 0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loader text padding</td>
      </tr>
    </table>
  </pre>

<h2 id="loading-variables">Loading variables</h2>
<h4 id="the-codelibloadingcode-mixin-variables">The <code>.lib-loading()</code> mixin variables</h4>
  <pre>
    <table>
      <tr>
        <th class="vars_head">Mixin variable</th>
        <th class="vars_head">Global variable</th>
        <th class="vars_head">Default value</th>
        <th class="vars_head">Allowed values</th>
        <th class="vars_head">Comment</th>
      </tr>
      <tr>
        <th>@_loading-background-color</th>
        <td>@loading__background-color</td>
        <td class="vars_value">@loader-overlay__background-color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loading overlay background color</td>
      </tr>
      <tr>
        <th>@_loading-background-image</th>
        <td>@loading__background-image</td>
        <td class="vars_value">@loader-icon__background-image</td>
        <td class="vars_value">'' | false | value</td>
        <td>Loading overlay background z-index</td>
      </tr>
    </table>
  </pre>

<h2 id="messages-variables">Messages variables</h2>
<h4 id="the-codelibmessagecode-mixin-variables">The <code>.lib-message()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@message__padding</th>
            <td class="vars_value">@indent__s @indent__base</td>
            <td class="vars_value">'' | value</td>
            <td>Message padding</td>
        </tr>
        <tr>
            <th>@message__margin</th>
            <td class="vars_value">@indent__xs 0</td>
            <td class="vars_value">'' | value</td>
            <td>Message margin</td>
        </tr>
        <tr>
            <th>@message__color</th>
            <td class="vars_value">false</td>
            <td class="vars_value">true | false</td>
            <td>Each message type has its own message color</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Messages font style</th>
        </tr>
        <tr>
            <th>@message__font-size</th>
            <td class="vars_value">13px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message font size</td>
        </tr>
        <tr>
            <th>@message__font-family</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message font family</td>
        </tr>
        <tr>
            <th>@message__font-style</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message font style</td>
        </tr>
        <tr>
            <th>@message__font-weight</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message font weight</td>
        </tr>
        <tr>
            <th>@message__line-height</th>
            <td class="vars_value">1.2em</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message line height</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Message icon setup</th>
        </tr>
        <tr>
            <th>@message-icon__font-size</th>
            <td class="vars_value">ceil(@message__font-size * 2 + 2)</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon font size</td>
        </tr>
        <tr>
            <th>@message-icon__font-line-height</th>
            <td class="vars_value">@message-icon__font-size</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon line height</td>
        </tr>
        <tr>
            <th>@message-icon__inner-padding-left</th>
            <td class="vars_value">40px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon padding left</td>
        </tr>
        <tr>
            <th>@message-icon__lateral-width</th>
            <td class="vars_value">30px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon lateral width</td>
        </tr>
        <tr>
            <th>@message-icon__lateral-arrow-size</th>
            <td class="vars_value">5px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon arrow size</td>
        </tr>
        <tr>
            <th>@message-icon__top</th>
            <td class="vars_value">18px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon top position</td>
        </tr>
        <tr>
            <th>@message-icon__right</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon right position</td>
        </tr>
        <tr>
            <th>@message-icon__bottom</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon bottom position</td>
        </tr>
        <tr>
            <th>@message-icon__left</th>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon left position</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Message border</th>
        </tr>
        <tr>
            <th>@message__border-width</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message border width</td>
        </tr>
        <tr>
            <th>@message__border-color</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message border color</td>
        </tr>
        <tr>
            <th>@message__border-style</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message border style</td>
        </tr>
        <tr>
            <th>@message__border-radius</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message border radius</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Information message</th>
        </tr>
        <tr>
            <th>@message-info__color</th>
            <td class="vars_value">#6f4400</td>
            <td class="vars_value">'' | false | value</td>
            <td>Information message text color</td>
        </tr>
        <tr>
            <th>@message-info__background</th>
            <td class="vars_value">#fdf0d5</td>
            <td class="vars_value">'' | false | value</td>
            <td>Information message background</td>
        </tr>
        <tr>
            <th>@message-info-link__color</th>
            <td class="vars_value">@link__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Information message link color</td>
        </tr>
        <tr>
            <th>@message-info-link__color-hover</th>
            <td class="vars_value">@link__hover__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Information message hovered link color</td>
        </tr>
        <tr>
            <th>@message-info-link__color-active</th>
            <td class="vars_value">@link__hover__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Information message active link color </td>
        </tr>
        <tr>
            <th>@message-info__border-color</th>
            <td class="vars_value">@message__border-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Information message border color</td>
        </tr>
        <tr>
            <th>@message-info-icon</th>
            <td class="vars_value">@icon-warning</td>
            <td class="vars_value">'' | false | value</td>
            <td>Information message icon symbol code</td>
        </tr>
        <tr>
            <th>@message-info-icon__color-inner</th>
            <td class="vars_value">#c07600</td>
            <td class="vars_value">'' | false | value</td>
            <td>Information message icon symbol color </td>
        </tr>
        <tr>
            <th>@message-info-icon__color-lateral</th>
            <td class="vars_value">@color-white</td>
            <td class="vars_value">'' | false | value</td>
            <td>Information message lateral icon symbol color</td>
        </tr>
        <tr>
            <th>@message-info-icon__background</th>
            <td class="vars_value">#6f4400</td>
            <td class="vars_value">'' | false | value</td>
            <td>Information message icon background</td>
        </tr>
        <tr>
            <th>@message-info-icon__top</th>
            <td class="vars_value">@message-icon__top</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon top position</td>
        </tr>
        <tr>
            <th>@message-info-icon__right</th>
            <td class="vars_value">@message-icon__right</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon right position</td>
        </tr>
        <tr>
            <th>@message-info-icon__bottom</th>
            <td class="vars_value">@message-icon__bottom</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon bottom position</td>
        </tr>
        <tr>
            <th>@message-info-icon__left</th>
            <td class="vars_value">@message-icon__left</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon left position</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Warning message</th>
        </tr>
        <tr>
            <th>@message-warning__color</th>
            <td class="vars_value">@message-info__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Warning message text color</td>
        </tr>
        <tr>
            <th>@message-warning__background</th>
            <td class="vars_value">@message-info__background</td>
            <td class="vars_value">'' | false | value</td>
            <td>Warning message background</td>
        </tr>
        <tr>
            <th>@message-warning-link__color</th>
            <td class="vars_value">@message-info-link__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Warning message link color</td>
        </tr>
        <tr>
            <th>@message-warning-link__color-hover</th>
            <td class="vars_value">@message-info-link__color-hover</td>
            <td class="vars_value">'' | false | value</td>
            <td>Warning message hovered link color</td>
        </tr>
        <tr>
            <th>@message-warning-link__color-active</th>
            <td class="vars_value">@message-info-link__color-active</td>
            <td class="vars_value">'' | false | value</td>
            <td>Warning message active link color </td>
        </tr>
        <tr>
            <th>@message-info__border-color</th>
            <td class="vars_value">@message-info__border-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Warning message border color</td>
        </tr>
        <tr>
            <th>@message-warning-icon</th>
            <td class="vars_value">@message-info-icon</td>
            <td class="vars_value">'' | false | value</td>
            <td>Warning message icon symbol code</td>
        </tr>
        <tr>
            <th>@message-warning-icon__color-inner</th>
            <td class="vars_value">@message-info-icon__color-inner</td>
            <td class="vars_value">'' | false | value</td>
            <td>Warning message icon symbol color </td>
        </tr>
        <tr>
            <th nowrap="nowrap">@message-warning-icon__color-lateral</th>
            <td class="vars_value" nowrap="nowrap">@message-info-icon__color-lateral</td>
            <td class="vars_value">'' | false | value</td>
            <td>Warning message lateral icon symbol color</td>
        </tr>
        <tr>
            <th>@message-warning-icon__background</th>
            <td class="vars_value">@message-info-icon__background</td>
            <td class="vars_value">'' | false | value</td>
            <td>Warning message icon background</td>
        </tr>
        <tr>
            <th>@message-warning-icon__top</th>
            <td class="vars_value">@message-icon__top</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon top position</td>
        </tr>
        <tr>
            <th>@message-warning-icon__right</th>
            <td class="vars_value">@message-icon__right</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon right position</td>
        </tr>
        <tr>
            <th>@message-warning-icon__bottom</th>
            <td class="vars_value">@message-icon__bottom</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon bottom position</td>
        </tr>
        <tr>
            <th>@message-warning-icon__left</th>
            <td class="vars_value">@message-icon__left</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon left position</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Error message</th>
        </tr>
        <tr>
            <th>@message-error__color</th>
            <td class="vars_value">@error__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Error message text color</td>
        </tr>
        <tr>
            <th>@message-error__background</th>
            <td class="vars_value">#fae5e5</td>
            <td class="vars_value">'' | false | value</td>
            <td>Error message background</td>
        </tr>
        <tr>
            <th>@message-error-link__color</th>
            <td class="vars_value">@link__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Error message link color</td>
        </tr>
        <tr>
            <th>@message-error-link__color-hover</th>
            <td class="vars_value">@link__hover__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Error message hovered link color</td>
        </tr>
        <tr>
            <th>@message-error-link__color-active</th>
            <td class="vars_value">@link__hover__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Error message active link color </td>
        </tr>
        <tr>
            <th>@message-error__border-color</th>
            <td class="vars_value">@message__border-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Error message border color</td>
        </tr>
        <tr>
            <th>@message-error-icon</th>
            <td class="vars_value">@icon-warning</td>
            <td class="vars_value">'' | false | value</td>
            <td>Error message icon symbol code</td>
        </tr>
        <tr>
            <th>@message-error-icon__color-inner</th>
            <td class="vars_value">#b30000</td>
            <td class="vars_value">'' | false | value</td>
            <td>Error message icon symbol color </td>
        </tr>
        <tr>
            <th>@message-error-icon__color-lateral</th>
            <td class="vars_value">@color-white</td>
            <td class="vars_value">'' | false | value</td>
            <td>Error message lateral icon symbol color</td>
        </tr>
        <tr>
            <th>@message-error-icon__background</th>
            <td class="vars_value">#b30000</td>
            <td class="vars_value">'' | false | value</td>
            <td>Error message icon background</td>
        </tr>
        <tr>
            <th>@message-error-icon__top</th>
            <td class="vars_value">@message-icon__top</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon top position</td>
        </tr>
        <tr>
            <th>@message-error-icon__right</th>
            <td class="vars_value">@message-icon__right</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon right position</td>
        </tr>
        <tr>
            <th>@message-error-icon__bottom</th>
            <td class="vars_value">@message-icon__bottom</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon bottom position</td>
        </tr>
        <tr>
            <th>@message-error-icon__left</th>
            <td class="vars_value">@message-icon__left</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon left position</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Success message</th>
        </tr>
        <tr>
            <th>@message-success__color</th>
            <td class="vars_value">#006400</td>
            <td class="vars_value">'' | false | value</td>
            <td>Success message text color</td>
        </tr>
        <tr>
            <th>@message-success__background</th>
            <td class="vars_value">#e5efe5</td>
            <td class="vars_value">'' | false | value</td>
            <td>Success message background</td>
        </tr>
        <tr>
            <th>@message-success-link__color</th>
            <td class="vars_value">@link__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Success message link color</td>
        </tr>
        <tr>
            <th>@message-success-link__color-hover</th>
            <td class="vars_value">@link__hover__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Success message hovered link color</td>
        </tr>
        <tr>
            <th>@message-success-link__color-active</th>
            <td class="vars_value">@link__hover__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Success message active link color </td>
        </tr>
        <tr>
            <th>@message-success__border-color</th>
            <td class="vars_value">@message__border-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Success message border color</td>
        </tr>
        <tr>
            <th>@message-success-icon</th>
            <td class="vars_value">@icon-checkmark</td>
            <td class="vars_value">'' | false | value</td>
            <td>Success message icon symbol code</td>
        </tr>
        <tr>
            <th>@message-success-icon__color-inner</th>
            <td class="vars_value">#006400</td>
            <td class="vars_value">'' | false | value</td>
            <td>Success message icon symbol color </td>
        </tr>
        <tr>
            <th>@message-success-icon__color-lateral</th>
            <td class="vars_value">@color-white</td>
            <td class="vars_value">'' | false | value</td>
            <td>Success message lateral icon symbol color</td>
        </tr>
        <tr>
            <th>@message-success-icon__background</th>
            <td class="vars_value">#006400</td>
            <td class="vars_value">'' | false | value</td>
            <td>Success message icon background</td>
        </tr>
        <tr>
            <th>@message-success-icon__top</th>
            <td class="vars_value">@message-icon__top</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon top position</td>
        </tr>
        <tr>
            <th>@message-success-icon__right</th>
            <td class="vars_value">@message-icon__right</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon right position</td>
        </tr>
        <tr>
            <th>@message-success-icon__bottom</th>
            <td class="vars_value">@message-icon__bottom</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon bottom position</td>
        </tr>
        <tr>
            <th>@message-success-icon__left</th>
            <td class="vars_value">@message-icon__left</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon left position</td>
        </tr>
        <tr>
            <th colspan="4" class="vars_section">Notice message</th>
        </tr>
        <tr>
            <th>@message-notice__color</th>
            <td class="vars_value">@message-info__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Notice message text color</td>
        </tr>
        <tr>
            <th>@message-notice__background</th>
            <td class="vars_value">@message-info__background</td>
            <td class="vars_value">'' | false | value</td>
            <td>Notice message background</td>
        </tr>
        <tr>
            <th>@message-notice-link__color</th>
            <td class="vars_value">@message-info-link__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Notice message link color</td>
        </tr>
        <tr>
            <th>@message-notice-link__color-hover</th>
            <td class="vars_value">@message-info-link__color-hover</td>
            <td class="vars_value">'' | false | value</td>
            <td>Notice message hovered link color</td>
        </tr>
        <tr>
            <th>@message-notice-link__color-active</th>
            <td class="vars_value">@message-info-link__color-active</td>
            <td class="vars_value">'' | false | value</td>
            <td>Notice message active link color </td>
        </tr>
        <tr>
            <th>@message-notice__border-color</th>
            <td class="vars_value">@message-info__border-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Notice message border color</td>
        </tr>
        <tr>
            <th>@message-notice-icon</th>
            <td class="vars_value">@message-info-icon</td>
            <td class="vars_value">'' | false | value</td>
            <td>Notice message icon symbol code</td>
        </tr>
        <tr>
            <th>@message-notice-icon__color-inner</th>
            <td class="vars_value">@message-info-icon__color-inner</td>
            <td class="vars_value">'' | false | value</td>
            <td>Notice message icon symbol color </td>
        </tr>
        <tr>
            <th>@message-notice-icon__color-lateral</th>
            <td class="vars_value">@message-info-icon__color-lateral</td>
            <td class="vars_value">'' | false | value</td>
            <td>Notice message lateral icon symbol color</td>
        </tr>
        <tr>
            <th>@message-notice-icon__background</th>
            <td class="vars_value">@message-info-icon__background</td>
            <td class="vars_value">'' | false | value</td>
            <td>Notice message icon background</td>
        </tr>
        <tr>
            <th>@message-notice-icon__top</th>
            <td class="vars_value">@message-icon__top</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon top position</td>
        </tr>
        <tr>
            <th>@message-notice-icon__right</th>
            <td class="vars_value">@message-icon__right</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon right position</td>
        </tr>
        <tr>
            <th>@message-notice-icon__bottom</th>
            <td class="vars_value">@message-icon__bottom</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon bottom position</td>
        </tr>
        <tr>
            <th>@message-notice-icon__left</th>
            <td class="vars_value">@message-icon__left</td>
            <td class="vars_value">'' | false | value</td>
            <td>Message icon left position</td>
        </tr>
    </table>
  </pre>

<h2 id="pagination-variables">Pagination variables</h2>
<h4 id="the-codelibpagercode-mixin-variables">The <code>.lib-pager()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pager-label-display</th>
            <td>@pager-label__display</td>
            <td class="vars_value">none</td>
            <td class="vars_value">none | block | inline-block</td>
            <td>The 'page' label is displayed</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pager-item-display</th>
            <td>@pager-item__display</td>
            <td class="vars_value">inline-block</td>
            <td class="vars_value">none | block | inline-block</td>
            <td>The pager item label is displayed</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pager-reset-spaces</th>
            <td>@pager-reset-spaces</td>
            <td class="vars_value">true</td>
            <td class="vars_value">true | false</td>
            <td>Reset spaces between inline-block elements if elements 'display' is set to 'inline-block'</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pager-font-size</th>
            <td>@pager__font-size</td>
            <td class="vars_value">@font-size__s</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager font size</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pager-font-weight</th>
            <td>@pager__font-weight</td>
            <td class="vars_value">@font-weight__bold</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager font weight</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pager-line-height</th>
            <td>@pager__line-height</td>
            <td class="vars_value">32px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager line height</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pager-item-margin</th>
            <td>@pager-item__margin</td>
            <td class="vars_value">0 2px 0 0</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item margin</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pager-item-padding</th>
            <td>@pager-item__padding</td>
            <td class="vars_value">0 4px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item padding</td>
        </tr>
        <tr>
            <th>@_pager-actions-padding</th>
            <td>@pager-actions__padding</td>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager actions padding</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Pager current page</th>
        </tr>
        <tr>
            <th>@_pager-current-font-weight</th>
            <td>@pager-current__font-weight</td>
            <td class="vars_value">@font-weight__bold;</td>
            <td class="vars_value">'' | false | value</td>
            <td>Current page number font weight</td>
        </tr>
        <tr>
            <th>@_pager-current-color</th>
            <td>@pager-current__color</td>
            <td class="vars_value">@primary__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Current page number color</td>
        </tr>
        <tr>
            <th>@_pager-current-border</th>
            <td>@pager-current__border</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Current page number border</td>
        </tr>
        <tr>
            <th>@_pager-current-background</th>
            <td>@pager-current__background</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Current page number background</td>
        </tr>
        <tr>
            <th>@_pager-current-gradient</th>
            <td>@pager-current__gradient</td>
            <td class="vars_value">false</td>
            <td class="vars_value">true | false</td>
            <td>Current page number has gradient background</td>
        </tr>
        <tr>
            <th>@_pager-current-gradient-direction</th>
            <td>@pager-current__gradient-direction</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | vertical | horizontal</td>
            <td>Direction of current page number background gradient (if there is any)</td>
        </tr>
        <tr>
            <th>@_pager-current-gradient-color-start</th>
            <td>@pager-current__gradient-color-start</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Current page number gradient start color</td>
        </tr>
        <tr>
            <th>@_pager-current-gradient-color-end</th>
            <td>@pager-current__gradient-color-end</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Current page number gradient end color</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Link to page number</th>
        </tr>
        <tr>
            <th>@_pager-gradient</th>
            <td>@pager__gradient</td>
            <td class="vars_value">false</td>
            <td class="vars_value">true | false</td>
            <td>Pager items have gradient background</td>
        </tr>
        <tr>
            <th>@_pager-gradient-direction</th>
            <td>@pager__gradient-direction</td>
            <td class="vars_value">'false</td>
            <td class="vars_value">'' | false | vertical | horizontal</td>
            <td>Direction of background gradient (if there is any) of pager item</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Link to page number - default</th>
        </tr>
        <tr>
            <th>@_pager-color</th>
            <td>@pager__color</td>
            <td class="vars_value">@link__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item color</td>
        </tr>
        <tr>
            <th>@_pager-border</th>
            <td>@pager__border</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item border</td>
        </tr>
        <tr>
            <th>@_pager-text-decoration</th>
            <td>@pager__text-decoration</td>
            <td class="vars_value">none</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item text decoration</td>
        </tr>
        <tr>
            <th>@_pager-background</th>
            <td>@pager__background</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item background</td>
        </tr>
        <tr>
            <th>@_pager-gradient-color-start</th>
            <td>@pager__gradient-color-start</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item gradient start color</td>
        </tr>
        <tr>
            <th>@_pager-gradient-color-end</th>
            <td>@pager__gradient-color-end</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item gradient end color</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Link to page number - visited</th>
        </tr>
        <tr>
            <th>@_pager-color-visited</th>
            <td>@pager__visited__color</td>
            <td class="vars_value">@link__visited__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item visited color</td>
        </tr>
        <tr>
            <th>@_pager-border-visited</th>
            <td>@pager__visited__border</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item visited border</td>
        </tr>
        <tr>
            <th>@_pager-background-visited</th>
            <td>@pager__visited__background</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item visited background</td>
        </tr>
        <tr>
            <th>@_pager-gradient-color-start-visited</th>
            <td>@pager__visited__gradient-color-start</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item visited gradient start color</td>
        </tr>
        <tr>
            <th>@_pager-gradient-color-end-visited</th>
            <td>@pager__visited__gradient-color-end</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item visited gradient end color</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Link to page number - hover</th>
        </tr>
        <tr>
            <th>@_pager-color-hover</th>
            <td>@pager__hover__color</td>
            <td class="vars_value">@link__hover__color</td>
            <td class="vars_value">&nbsp;</td>
            <td>Pager item hover color</td>
        </tr>
        <tr>
            <th>@_pager-border-hover</th>
            <td>@pager__hover__border</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item hover border</td>
        </tr>
        <tr>
            <th>@_pager-text-decoration-hover</th>
            <td>@pager__text-decoration</td>
            <td class="vars_value">none</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item hover text decoration</td>
        </tr>
        <tr>
            <th>@_pager-background-hover</th>
            <td>@pager__hover__background</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item hover background</td>
        </tr>
        <tr>
            <th>@_pager-gradient-color-start-hover</th>
            <td>@pager__hover__gradient-color-start</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item hover gradient start color</td>
        </tr>
        <tr>
            <th>@_pager-gradient-color-end-hover</th>
            <td>@pager__hover__gradient-color-end</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item hover gradient end color</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Link to page number - active</th>
        </tr>
        <tr>
            <th>@_pager-color-active</th>
            <td>@pager__active__color</td>
            <td class="vars_value">@link__hover__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item active color</td>
        </tr>
        <tr>
            <th>@_pager-border-active</th>
            <td>@pager__active__border</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item active border</td>
        </tr>
        <tr>
            <th>@_pager-background-active</th>
            <td>@pager__active__background</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item active background</td>
        </tr>
        <tr>
            <th>@_pager-gradient-color-start-active</th>
            <td>@pager__active__gradient-color-start</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item active  gradient start color</td>
        </tr>
        <tr>
            <th>@_pager-gradient-color-end-active</th>
            <td>@pager__active__gradient-color-end</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager item active  gradient end color</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Previous/next action links - icons</th>
        </tr>
        <tr>
            <th>@_pager-icon-use</th>
            <td>@pager-icon__use</td>
            <td class="vars_value">true</td>
            <td class="vars_value">true | false</td>
            <td>previous/next links have icons</td>
        </tr>
        <tr>
            <th>@_pager-icon-previous-content</th>
            <td>@pager-icon__previous-content</td>
            <td class="vars_value">@icon-prev</td>
            <td class="vars_value">'' | false | value</td>
            <td>&quot;previous&quot; link icon</td>
        </tr>
        <tr>
            <th>@_pager-icon-next-content</th>
            <td>@pager-icon__next-content</td>
            <td class="vars_value">@icon-next</td>
            <td class="vars_value">'' | false | value</td>
            <td>&quot;next&quot; link icon</td>
        </tr>
        <tr>
            <th>@_pager-icon-text-hide</th>
            <td></td>
            <td class="vars_value">true</td>
            <td class="vars_value">true | false</td>
            <td>The &quot;previous&quot; and &quot;next&quot; words are hidden</td>
        </tr>
        <tr>
            <th>@_pager-icon-position</th>
            <td></td>
            <td class="vars_value">before</td>
            <td class="vars_value">before | after</td>
            <td>Icon position</td>
        </tr>
        <tr>
            <th>@_pager-icon-font</th>
            <td>@pager-icon__font</td>
            <td class="vars_value">@icon-font</td>
            <td class="vars_value">'' | false | value</td>
            <td>Icon font</td>
        </tr>
        <tr>
            <th>@_pager-icon-font-margin</th>
            <td>@pager-icon__font-margin</td>
            <td class="vars_value">0 0 0 -6px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Icon font margin</td>
        </tr>
        <tr>
            <th>@_pager-icon-font-vertical-align</th>
            <td>@pager-icon__font-vertical-align</td>
            <td class="vars_value">top</td>
            <td class="vars_value">'' | false | value</td>
            <td>Icon font vertical align</td>
        </tr>
        <tr>
            <th>@_pager-icon-font-size</th>
            <td>@pager-icon__font-size</td>
            <td class="vars_value">46px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Icon font size</td>
        </tr>
        <tr>
            <th>@_pager-icon-font-line-height</th>
            <td>@pager-icon__font-line-height</td>
            <td class="vars_value">@icon-font__line-height</td>
            <td class="vars_value">'' | false | value</td>
            <td>Icon font line height</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Previous/next action links</th>
        </tr>
        <tr>
            <th>@_pager-action-gradient</th>
            <td>@pager__gradient</td>
            <td class="vars_value">false</td>
            <td class="vars_value">true | false</td>
            <td>Previous/next links have gradient background</td>
        </tr>
        <tr>
            <th>@_pager-action-gradient-direction</th>
            <td>@pager__gradient-direction</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | vertical | horizontal</td>
            <td>Direction of background gradient (if there is any) of previous/next links</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Previous/next action links - default</th>
        </tr>
        <tr>
            <th>@_pager-action-color</th>
            <td>@pager-action__color</td>
            <td class="vars_value">@text__color__muted</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action color</td>
        </tr>
        <tr>
            <th>@_pager-action-border</th>
            <td>@pager-action__border</td>
            <td class="vars_value">@border-width__base solid @border-color__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action border</td>
        </tr>
        <tr>
            <th>@_pager-action-text-decoration</th>
            <td>@pager-action__text-decoration</td>
            <td class="vars_value">@pager__text-decoration</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action text decoration</td>
        </tr>
        <tr>
            <th>@_pager-action-background</th>
            <td>@pager-action__background</td>
            <td class="vars_value">@pager__background</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action background</td>
        </tr>
        <tr>
            <th>@_pager-action-gradient-color-start</th>
            <td>@pager__gradient-color-start</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action gradient start color</td>
        </tr>
        <tr>
            <th>@_pager-action-gradient-color-end</th>
            <td>@pager__gradient-color-end</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action gradient end color</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Previous/next action links - visited</th>
        </tr>
        <tr>
            <th>@_pager-action-color-visited</th>
            <td>@pager-action__visited__color</td>
            <td class="vars_value">@pager-action__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action visited color</td>
        </tr>
        <tr>
            <th>@_pager-action-border-visited</th>
            <td>@pager-action__visited__border</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action visited border</td>
        </tr>
        <tr>
            <th>@_pager-action-background-visited</th>
            <td>@pager-action__visited__background</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action visited background</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pager-action-gradient-color-start-visited</th>
            <td>@pager__visited__gradient-color-start</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action visited gradient start color</td>
        </tr>
        <tr>
            <th>@_pager-action-gradient-color-end-visited</th>
            <td>@pager__visited__gradient-color-end</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action visited gradient end color</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Previous/next action links - hover</th>
        </tr>
        <tr>
            <th>@_pager-action-color-hover</th>
            <td>@pager-action__hover__color</td>
            <td class="vars_value">@pager-action__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action hover color</td>
        </tr>
        <tr>
            <th>@_pager-action-border-hover</th>
            <td>@pager-action__hover__border</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action hover border</td>
        </tr>
        <tr>
            <th>@_pager-action-text-decoration-hover</th>
            <td>@pager-action__hover__text-decoration</td>
            <td class="vars_value" nowrap="nowrap">@pager__hover__text-decoration</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action hover text decoration</td>
        </tr>
        <tr>
            <th>@_pager-action-background-hover</th>
            <td>@pager-action__hover__background</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action hover background</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pager-action-gradient-color-start-hover</th>
            <td>@pager__hover__gradient-color-start</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action hover gradient start color</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pager-action-gradient-color-end-hover</th>
            <td>@pager__hover__gradient-color-end</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action hover gradient end color</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Previous/next action links - active</th>
        </tr>
        <tr>
            <th>@_pager-action-color-active</th>
            <td>@pager-action__active__color</td>
            <td class="vars_value">@pager-action__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action active color</td>
        </tr>
        <tr>
            <th>@_pager-action-border-active</th>
            <td>@pager-action__active__border</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action active border</td>
        </tr>
        <tr>
            <th>@_pager-action-background-active</th>
            <td>@pager-action__active__background</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action active background</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pager-action-gradient-color-start-active</th>
            <td>@pager__active__gradient-color-start</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action active gradient start color</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_pager-action-gradient-color-end-active</th>
            <td>@pager__active__gradient-color-end</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Pager action active gradient end color</td>
        </tr>
      </table>
  </pre>

<h2 id="popup-variables">Popup variables</h2>
<h4 id="the-codelibpopupcode-mixin-variables">The <code>.lib-popup()</code> mixin variables</h4>
 <pre>
    <table>
      <tr>
        <th class="vars_head">Mixin variable</th>
        <th class="vars_head">Global variable</th>
        <th class="vars_head">Default value</th>
        <th class="vars_head">Allowed values</th>
        <th class="vars_head">Comment</th>
      </tr>
      <tr>
        <th>@_popup-width</th>
        <td>@popup__width</td>
        <td class="vars_value">auto</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup width</td>
      </tr>
      <tr>
        <th>@_popup-height</th>
        <td>@popup__height</td>
        <td class="vars_value">auto</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup height</td>
      </tr>
      <tr>
        <th>@_popup-padding</th>
        <td>@popup__padding</td>
        <td class="vars_value">22px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Inner popup padding</td>
      </tr>
      <tr>
        <th>@_popup-background</th>
        <td>@popup__background</td>
        <td class="vars_value">@color-white</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup background</td>
      </tr>
      <tr>
        <th>@_popup-border</th>
        <td>@popup__border</td>
        <td class="vars_value">1px solid #aeaeae</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup border</td>
      </tr>
      <tr>
        <th>@_popup-shadow</th>
        <td>@popup__shadow</td>
        <td class="vars_value">0 3px 3px rgba(0,0,0,.15)</td>
        <td class="vars_value">'' | false | none | value</td>
        <td>Popup shadow</td>
      </tr>
      <tr>
        <th>@_popup-fade</th>
        <td>@popup__fade</td>
        <td class="vars_value">opacity .3s linear</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup overlay opacity</td>
      </tr>
      <tr>
        <th>@_popup-z-index</th>
        <td>@popup__z-index</td>
        <td class="vars_value">1001</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup z-index</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Popup position</th>
      </tr>
      <tr>
        <th>@_popup-position</th>
        <td>@popup__position</td>
        <td class="vars_value">fixed</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup position</td>
      </tr>
      <tr>
        <th>@_popup-position-top</th>
        <td>@popup__position-top</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup top</td>
      </tr>
      <tr>
        <th>@_popup-position-right</th>
        <td>@popup__position-right</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup right</td>
      </tr>
      <tr>
        <th>@_popup-position-bottom</th>
        <td>@popup__position-bottom</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup bottom</td>
      </tr>
      <tr>
        <th>@_popup-position-left</th>
        <td>@popup__position-left</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup left</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Popup margin</th>
      </tr>

      <tr>
        <th>@_popup-margin-top</th>
        <td>@popup__margin-top</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup top margin</td>
      </tr>
      <tr>
        <th>@_popup-margin-right</th>
        <td>@popup__margin-right</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup right margin</td>
      </tr>
      <tr>
        <th>@_popup-margin-bottom</th>
        <td>@popup__margin-bottom</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup bottom margin</td>
      </tr>
      <tr>
        <th>@_popup-margin-left</th>
        <td>@popup__margin-left</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup left margin</td>
      </tr>
      <tr>
        <th>@_popup-content-height</th>
        <td>@popup-content__height</td>
        <td class="vars_value">auto</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup content height</td>
      </tr>
      <tr>
        <th>@_popup-header-margin</th>
        <td>@popup-header__margin</td>
        <td class="vars_value">0 0 25px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup header margin</td>
      </tr>
      <tr>
        <th>@_popup-content-margin</th>
        <td>@popup-content__margin</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup content margin</td>
      </tr>
      <tr>
        <th>@_popup-footer-margin</th>
        <td>@popup-footer__margin</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup footer margin</td>
      </tr>
      <tr>
        <th>@_popup-title-headings</th>
        <td>@popup-title-headings</td>
        <td class="vars_value">true</td>
        <td class="vars_value">true | false</td>
        <td>Popup title has the same style as one of page headings</td>
      </tr>
      <tr>
        <th>@_popup-title-headings-level</th>
        <td>@popup-title-headings__level</td>
        <td class="vars_value">h3</td>
        <td class="vars_value">h1 | h2 | h3 | h4 | h5 | h6</td>
        <td>What heading style is applied to the popup title</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Popup close button</th>
      </tr>
      <tr>
        <th>@_popup-button-close-icon</th>
        <td>@popup-button-close__icon</td>
        <td class="vars_value">true</td>
        <td class="vars_value">true | false</td>
        <td>Popup close button has an icon</td>
      </tr>
      <tr>
        <th>@_popup-button-close-reset</th>
        <td>@popup-button-close__reset</td>
        <td class="vars_value">true</td>
        <td class="vars_value">true | false</td>
        <td>Reset popup close button default styles</td>
      </tr>
      <tr>
        <th>@_popup-button-close-position</th>
        <td>@popup-button-close__position</td>
        <td class="vars_value">absolute</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup button close position</td>
      </tr>
      <tr>
        <th>@_popup-button-close-position-top</th>
        <td>@popup-button-close__position-top</td>
        <td class="vars_value">10px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup button close top position</td>
      </tr>
      <tr>
        <th>@_popup-button-close-position-right</th>
        <td>@popup-button-close__position-right</td>
        <td class="vars_value">10px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup button close right position</td>
      </tr>
      <tr>
        <th>@_popup-button-close-position-bottom</th>
        <td>@popup-button-close__position-bottom</td>
        <td class="vars_value">''</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup button close bottom position</td>
      </tr>
      <tr>
        <th>@_popup-button-close-position-left</th>
        <td>@popup-button-close__position-left</td>
        <td class="vars_value">''</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup button close left position</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Popup icons parameters</th>
      </tr>
      <tr>
        <th>@_popup-icon-font-content</th>
        <td>@popup-icon-font__content</td>
        <td class="vars_value">@icon-remove</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup icon code</td>
      </tr>
      <tr>
        <th>@_popup-icon-font</th>
        <td>@popup-icon-font</td>
        <td class="vars_value">@button-icon__font</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup icon font</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-size</th>
        <td>@popup-icon-font__size</td>
        <td class="vars_value">@button-icon__font-size</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup icon font size</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-line-height</th>
        <td>@popup-icon-font__line-height</td>
        <td class="vars_value">@button-icon__line-height</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup icon line height</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-color</th>
        <td>@popup-icon-font__color</td>
        <td class="vars_value">@button-icon__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup icon color</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-color-hover</th>
        <td>@popup-icon-font__color-hover</td>
        <td class="vars_value">@button-icon__hover__font-color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Hovered popup icon color</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-color-active</th>
        <td>@popup-icon-font__color-active</td>
        <td class="vars_value">@popup-icon-font__color-active</td>
        <td class="vars_value">'' | false | value</td>
        <td>Active popup icon color</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-margin</th>
        <td>@popup-icon-font__margin</td>
        <td class="vars_value">@button-icon__margin</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup icon  margin</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-vertical-align</th>
        <td>@popup-icon-font__vertical-align</td>
        <td class="vars_value">@button-icon__vertical-align</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup icon vertical align</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-position</th>
        <td>@popup-icon-font__position</td>
        <td class="vars_value">@button-icon__position</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup icon position</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-text-hide</th>
        <td>@popup-icon-font__text-hide</td>
        <td class="vars_value">true</td>
        <td class="vars_value">true | false</td>
        <td>Popup icon hide text</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Actions toolbar parameters</th>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar</th>
        <td>@popup-actions-toolbar</td>
        <td class="vars_value">false</td>
        <td class="vars_value">true | false</td>
        <td>Actions toolbar is displayed</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-actions-position</th>
        <td>@popup-actions-toolbar-actions__position</td>
        <td class="vars_value">@actions-toolbar-actions__position</td>
        <td class="vars_value">justify | left | right | center</td>
        <td>Actions toolbar position</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-actions-reverse</th>
        <td>@popup-actions-toolbar-actions__reverse</td>
        <td class="vars_value">@actions-toolbar-actions__reverse</td>
        <td class="vars_value">true | false</td>
        <td>Actions toolbar reverse</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-margin</th>
        <td>@popup-actions-toolbar__margin</td>
        <td class="vars_value">@actions-toolbar__margin</td>
        <td class="vars_value">'' | false | value</td>
        <td>Actions toolbar margin</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-padding</th>
        <td>@popup-actions-toolbar__padding</td>
        <td class="vars_value">@actions-toolbar__padding</td>
        <td class="vars_value">'' | false | value</td>
        <td>Actions toolbar padding</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-actions-margin</th>
        <td>@popup-actions-toolbar-actions__margin</td>
        <td class="vars_value">@actions-toolbar-actions__margin</td>
        <td class="vars_value">'' | false | value</td>
        <td>Actions toolbar actions margin</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-primary-actions-margin</th>
        <td>@popup-actions-toolbar-actions-primary__margin</td>
        <td class="vars_value">@actions-toolbar-actions-primary__margin</td>
        <td class="vars_value">'' | false | value</td>
        <td>Actions toolbar primary actions margin</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_popup-actions-toolbar-secondary-actions-margin</th>
        <td>@popup-actions-toolbar-actions-secondary__margin</td>
        <td class="vars_value"nowrap="nowrap">@actions-toolbar-actions-secondary__margin</td>
        <td class="vars_value">'' | false | value</td>
        <td>Actions toolbar secondary actions margin</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-actions-links-margin-top</th>
        <td>@popup-actions-toolbar-actions-links__margin-top</td>
        <td class="vars_value">@actions-toolbar-actions-links__margin-top</td>
        <td class="vars_value">'' | false | value</td>
        <td>Actions toolbar links top margin</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-primary-actions-links-margin-top</th>
        <td>@popup-actions-toolbar-actions-links-primary__margin-top</td>
        <td class="vars_value">@actions-toolbar-actions-links-primary__margin-top</td>
        <td class="vars_value">'' | false | value</td>
        <td>Actions toolbar primary actions links top margin</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-secondary-links-margin-top</th>
        <td>@popup-actions-toolbar-actions-links-secondary__margin-top</td>
        <td class="vars_value">@actions-toolbar-actions-links-secondary__margin-top</td>
        <td class="vars_value">'' | false | value</td>
        <td>Actions toolbar secondary links top margin</td>
      </tr>
    </table>
 </pre>

<h2 id="window-overlay-variables">Window overlay variables</h2>
  <pre>
    <table>
      <tr>
        <th class="vars_head">Mixin variable</th>
        <th class="vars_head">Global variable</th>
        <th class="vars_head">Default value</th>
        <th class="vars_head">Allowed values</th>
        <th class="vars_head">Comment</th>
      </tr>
      <tr>
        <th>@_overlay-background</th>
        <td>@overlay__background</td>
        <td class="vars_value">#000</td>
        <td class="vars_value">'' | false | value</td>
        <td>Overlay background color</td>
      </tr>
      <tr>
        <th>@_overlay-opacity</th>
        <td>@overlay__opacity</td>
        <td class="vars_value">.5</td>
        <td class="vars_value">'' | false | value</td>
        <td>Overlay opacity</td>
      </tr>
      <tr>
        <th>@_overlay-opacity-old</th>
        <td>@overlay__opacity-old</td>
        <td class="vars_value">50</td>
        <td class="vars_value">'' | false | value</td>
        <td>Overlay opacity for old browsers</td>
      </tr>
      <tr>
        <th>@_overlay-fade</th>
        <td>@overlay__fade</td>
        <td class="vars_value">opacity .15s linear</td>
        <td class="vars_value">'' | false | value</td>
        <td>Overlay fade</td>
      </tr>
      <tr>
        <th>@_overlay-z-index</th>
        <td>@overlay__z-index</td>
        <td class="vars_value">1000</td>
        <td class="vars_value">'' | value</td>
        <td>Overlay z-index</td>
      </tr>
    </table>
  </pre>

<h2 id="rating-variables">Rating variables</h2>
<h4 id="the-codelibratingvotecode-and-codelibratingsummarycode-mixin-variables">The <code>.lib-rating-vote()</code> and <code>.lib-rating-summary()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_icon-content</th>
            <td>@rating-icon__content</td>
            <td class="vars_value">@icon-star</td>
            <td class="vars_value">'' | false | icon code</td>
            <td>Rating icon symbol code</td>
        </tr>
        <tr>
            <th>@_icon-count</th>
            <td>@rating-icon__count</td>
            <td class="vars_value">5</td>
            <td class="vars_value">'' | value</td>
            <td>Number of rating icon symbols</td>
        </tr>
        <tr>
            <th>@_icon-font</th>
            <td>@rating-icon__font</td>
            <td class="vars_value">@icon-font</td>
            <td class="vars_value">'' | false | value</td>
            <td>Icon font</td>
        </tr>
        <tr>
            <th>@_icon-font-size</th>
            <td>@rating-icon__font-size</td>
            <td class="vars_value">28px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Icon font size</td>
        </tr>
        <tr>
            <th>@_icon-letter-spacing</th>
            <td>@rating-icon__letter-spacing</td>
            <td class="vars_value">-10px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Icon letter spacing</td>
        </tr>
        <tr>
            <th>@_icon-color</th>
            <td>@rating-icon__color</td>
            <td class="vars_value">#c7c7c7</td>
            <td class="vars_value">'' | false | value</td>
            <td>Unselected icons color</td>
        </tr>
        <tr>
            <th>@_icon-color-active</th>
            <td>@rating-icon__active__color</td>
            <td class="vars_value">#ff5601</td>
            <td class="vars_value">'' | false | value</td>
            <td>Selected and hovered icons color</td>
        </tr>
        <tr>
            <th>@_label-hide</th>
            <td>@rating-label__hide</td>
            <td class="vars_value">false</td>
            <td class="vars_value">true | false</td>
            <td>Rating label is displayed</td>
        </tr>
    </table>
  </pre>

<h2 id="tabs-variables">Tabs variables</h2>
<h4 id="the-codelibdatatabscode-mixin-variables">The <code>.lib-data-tabs()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_tab-control-font-family</th>
            <td>@tab-control__font-family</td>
            <td class="vars_value">false</td>
            <td class="vars_value" nowrap>'' | false | value</td>
            <td>Tabs font family</td>
        </tr>
        <tr>
            <th>@_tab-control-font-size</th>
            <td>@tab-control__font-size</td>
            <td class="vars_value">@font-size__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tabs font size</td>
        </tr>
        <tr>
            <th>@_tab-control-font-weight</th>
            <td>@tab-control__font-weight</td>
            <td class="vars_value">@font-weight__semibold</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tabs font weight</td>
        </tr>
        <tr>
            <th>@_tab-control-font-style</th>
            <td>@tab-control__font-style</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tabs font style</td>
        </tr>
        <tr>
            <th>@_tab-control-line-height</th>
            <td>@tab-control__line-height</td>
            <td class="vars_value">@tab-control__height</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tabs line height</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Tabs controls settings</th>
        </tr>
        <tr>
            <th>@_tab-control-background-color</th>
            <td>@tab-control__background-color</td>
            <td class="vars_value">@panel__background-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Current tab background</td>
        </tr>
        <tr>
            <th>@_tab-control-color</th>
            <td>@tab-control__color</td>
            <td class="vars_value">@link__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Current tab text color</td>
        </tr>
        <tr>
            <th>@_tab-control-text-decoration</th>
            <td>@tab-control__text-decoration</td>
            <td class="vars_value">none</td>
            <td class="vars_value">'' | false | value</td>
            <td>Current tab text-decoration</td>
        </tr>
        <tr>
            <th>@_tab-control-background-color-hover</th>
            <td>@tab-control__hover__background-color</td>
            <td class="vars_value">lighten(@tab-control__background-color, 5%)</td>
            <td class="vars_value">'' | false | value</td>
            <td>Hovered tab background</td>
        </tr>
        <tr>
            <th>@_tab-control-color-visited</th>
            <td>@tab-control__color</td>
            <td class="vars_value">@text__color__muted</td>
            <td class="vars_value">'' | false | value</td>
            <td>Visited tab color</td>
        </tr>
        <tr>
            <th>@_tab-control-text-decoration-visited</th>
            <td>@tab-control__color</td>
            <td class="vars_value"></td>
            <td class="vars_value">'' | false | value</td>
            <td>Visited tab text-decoration</td>
        </tr>
        <tr>
            <th>@_tab-control-color-hover</th>
            <td>@tab-control__hover__color</td>
            <td class="vars_value">@tab-control__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Hovered tab text color</td>
        </tr>
        <tr>
            <th>@_tab-control-text-decoration-hover</th>
            <td>@tab-control__text-decoration</td>
            <td class="vars_value">@tab-control__text-decoration</td>
            <td class="vars_value">'' | false | value</td>
            <td>Hovered tab text-decoration</td>
        </tr>
        <tr>
            <th>@_tab-control-background-color-active</th>
            <td>@tab-control__active__background-color</td>
            <td class="vars_value">lighten(@tab-control__background-color, 15%)</td>
            <td class="vars_value">'' | false | value</td>
            <td>Active tab background</td>
        </tr>
        <tr>
            <th>@_tab-control-color-active</th>
            <td>@tab-control__active__color</td>
            <td class="vars_value">@text__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Active tab text color</td>
        </tr>
        <tr>
            <th>@_tab-control-text-decoration-active</th>
            <td>@tab-control__text-decoration</td>
            <td class="vars_value">@tab-control__text-decoration</td>
            <td class="vars_value">'' | false | value</td>
            <td>Active tab text-decoration</td>
        </tr>
        <tr>
            <th>@_tab-control-height</th>
            <td>@tab-control__height</td>
            <td class="vars_value">@indent__l</td>
            <td class="vars_value">'' | false | value</td>
            <td>Height of tab control</td>
        </tr>
        <tr>
            <th>@_tab-control-margin-right</th>
            <td>@tab-control__margin-right</td>
            <td class="vars_value">@indent__xs</td>
            <td class="vars_value">'' | false | value</td>
            <td>Right margin of tab title block</td>
        </tr>
        <tr>
            <th>@_tab-control-padding-top</th>
            <td>@tab-control__padding-top</td>
            <td class="vars_value">@indent__xs</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tab control padding top</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_tab-control-padding-right</th>
            <td>@tab-control__padding-right</td>
            <td class="vars_value">@indent__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tab control padding right</td>
        </tr>
        <tr>
            <th>@_tab-control-padding-bottom</th>
            <td>@tab-control__padding-bottom</td>
            <td class="vars_value">@tab-control__padding-bottom</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tab control padding bottom</td>
        </tr>
        <tr>
            <th>@_tab-control-padding-left</th>
            <td>@tab-control__padding-left</td>
            <td class="vars_value">@tab-control__padding-left</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tab control padding left</td>
        </tr>
        <tr>
            <th>@_tab-control-border-width</th>
            <td>@tab-control__border-width</td>
            <td class="vars_value">@border-width__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tab control border width</td>
        </tr>
        <tr>
            <th>@_tab-control-border-color</th>
            <td>@tab-control__border-color</td>
            <td class="vars_value">@border-color__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tab control border color</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Tab content settings</th>
        </tr>
        <tr>
            <th>@_tab-content-background-color</th>
            <td>@tab-content__background-color</td>
            <td class="vars_value">@tab-control__active__background-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tab content background</td>
        </tr>
        <tr>
            <th>@_tab-content-border-top-status</th>
            <td>@tab-content__border-top-status</td>
            <td class="vars_value">false</td>
            <td class="vars_value">true | false</td>
            <td>Tab content border top status. When set to 'true' the content has only top border. When set to 'false' the content has all 4 borders</td>
        </tr>
        <tr>
            <th>@_tab-content-border</th>
            <td>@tab-content__border</td>
            <td class="vars_value">@tab-control__border-width solid @tab-control__border-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tab content border</td>
        </tr>
        <tr>
            <th>@_tab-content-margin-top</th>
            <td>@tab-content__margin-top</td>
            <td class="vars_value">@tab-control__height + @tab-control__border-width + @tab-control__padding-top + @tab-control__padding-bottom</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tab content top margin (it is the sum of tabs height and top border width)</td>
        </tr>
        <tr>
            <th>@_tab-content-padding-top</th>
            <td>@tab-content__padding-top</td>
            <td class="vars_value">@indent__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tab content padding</td>
        </tr>
        <tr>
            <th>@_tab-content-padding-right</th>
            <td>@tab-content__padding-right</td>
            <td class="vars_value">@indent__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tab content padding</td>
        </tr>
        <tr>
            <th>@_tab-content-padding-bottom</th>
            <td>@tab-content__padding-bottom</td>
            <td class="vars_value">@tab-content__padding-top</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tab content padding</td>
        </tr>
        <tr>
            <th>@_tab-content-padding-left</th>
            <td>@tab-content__padding-left</td>
            <td class="vars_value">@tab-content__padding-right</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tab content padding</td>
        </tr>
    </table>
  </pre>

<h2 id="accordion-variables">Accordion variables</h2>
<h4 id="the-codelibdataaccordioncode-mixin-variables">The <code>.lib-data-accordion()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_accordion-control-font-family</th>
            <td>@accordion-control__font-family</td>
            <td class="vars_value">@tab-control__font-family</td>
            <td class="vars_value" nowrap>'' | false | value</td>
            <td>Accordion font family</td>
        </tr>
        <tr>
            <th>@_accordion-control-font-size</th>
            <td>@accordion-control__font-size</td>
            <td class="vars_value">@font-size__l</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion font size</td>
        </tr>
        <tr>
            <th>@_accordion-control-font-style</th>
            <td>@accordion-control__font-style</td>
            <td class="vars_value">@tab-control__font-style</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion font style</td>
        </tr>
        <tr>
            <th>@_accordion-control-font-weight</th>
            <td>@accordion-control__font-weight</td>
            <td class="vars_value">@tab-control__font-weight</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion font weight</td>
        </tr>
        <tr>
            <th>@_accordion-control-line-height</th>
            <td>@accordion-control__line-height</td>
            <td class="vars_value">@accordion-control__height</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion line height</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Accordion tabs controls settings</th>
        </tr>
        <tr>
            <th>@_accordion-control-border-top</th>
            <td>@accordion-control__border-top</td>
            <td class="vars_value">@tab-control__border-width solid @tab-control__border-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion control border</td>
        </tr>
        <tr>
            <th>@_accordion-control-border-right</th>
            <td>@accordion-control__border-right</td>
            <td class="vars_value">@tab-control__border-width solid @tab-control__border-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion control border</td>
        </tr>
        <tr>
            <th>@_accordion-control-border-bottom</th>
            <td>@accordion-control__border-bottom</td>
            <td class="vars_value">@tab-control__border-width solid @tab-control__border-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion control border</td>
        </tr>
        <tr>
            <th>@_accordion-control-border-left</th>
            <td>@accordion-control__border-left</td>
            <td class="vars_value">@tab-control__border-width solid @tab-control__border-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion control border</td>
        </tr>
        <tr>
            <th>@_accordion-control-background-color</th>
            <td>@accordion-control__background-color</td>
            <td class="vars_value">@tab-control__background-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion control background</td>
        </tr>
        <tr>
            <th>@_accordion-control-color</th>
            <td>@accordion-control__color</td>
            <td class="vars_value">@tab-control__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion control color</td>
        </tr>
        <tr>
            <th>@_accordion-control-text-decoration</th>
            <td>@accordion-control__text-decoration</td>
            <td class="vars_value">@tab-control__text-decoration</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion control text decoration</td>
        </tr>
        <tr>
            <th>@_accordion-control-color-visited</th>
            <td>@accordion-control__color</td>
            <td class="vars_value">@accordion-control__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion control visited link color</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_accordion-control-text-decoration-visited</th>
            <td>@accordion-control__text-decoration</td>
            <td class="vars_value">@accordion-control__text-decoration</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion control visited link text-decoration</td>
        </tr>
        <tr>
            <th>@_accordion-control-background-color-hover</th>
            <td>@accordion-control__hover__background-color</td>
            <td class="vars_value">@tab-control__hover__background-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Hovered accordion control background</td>
        </tr>
        <tr>
            <th>@_accordion-control-color-hover</th>
            <td>@accordion-control__hover__color</td>
            <td class="vars_value">@tab-control__hover__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Hovered accordion control text color</td>
        </tr>
        <tr>
            <th>@_accordion-control-text-decoration-hover</th>
            <td>@accordion-control__hover__text-decoration</td>
            <td class="vars_value">@tab-control__hover__text-decoration</td>
            <td class="vars_value">'' | false | value</td>
            <td>Hovered accordion control text-decoration</td>
        </tr>
        <tr>
            <th>@_accordion-control-background-color-active</th>
            <td>@accordion-control__active__background-color</td>
            <td class="vars_value">@tab-control__active__background-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Active accordion control background</td>
        </tr>
        <tr>
            <th>@_accordion-control-color-active</th>
            <td>@accordion-control__active__color</td>
            <td class="vars_value">@tab-control__active__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Active accordion control text color</td>
        </tr>
        <tr>
            <th>@_accordion-control-text-decoration-active</th>
            <td>@accordion-control__active__text-decoration</td>
            <td class="vars_value">@tab-control__active__text-decoration</td>
            <td class="vars_value">'' | false | value</td>
            <td>Active accordion control text-decoration</td>
        </tr>
        <tr>
            <th>@_accordion-control-height</th>
            <td>@accordion-control__height</td>
            <td class="vars_value">@indent__xl</td>
            <td class="vars_value">'' | false | value</td>
            <td>Height of accordion control</td>
        </tr>
        <tr>
            <th>@_accordion-control-margin-bottom</th>
            <td>@accordion-control__margin-bottom</td>
            <td class="vars_value">@indent__xs</td>
            <td class="vars_value">'' | false | value</td>
            <td>Bottom margin of the accordion control</td>
        </tr>
        <tr>
            <th>@_accordion-control-padding-top</th>
            <td>@accordion-control__padding-top</td>
            <td class="vars_value">@tab-control__padding-top</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion tab control padding top</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_accordion-control-padding-right</th>
            <td>@accordion-control__padding-right</td>
            <td class="vars_value">@indent__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion tab control padding right</td>
        </tr>
        <tr>
            <th>@_accordion-control-padding-bottom</th>
            <td>@accordion-control__padding-bottom</td>
            <td class="vars_value">@tab-control__padding-bottom</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion tab control padding bottom</td>
        </tr>
        <tr>
            <th>@_accordion-control-padding-left</th>
            <td>@accordion-control__padding-left</td>
            <td class="vars_value">@accordion-control__padding-right</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion tab control padding left</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Accordion content settings</th>
        </tr>
        <tr>
            <th>@_accordion-content-background-color</th>
            <td>@accordion-content__background-color</td>
            <td class="vars_value">@tab-control__active__background-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion tab content background</td>
        </tr>
        <tr>
            <th>@_accordion-content-border</th>
            <td>@accordion-content__border</td>
            <td class="vars_value">@tab-content__border</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion tab content border</td>
        </tr>
        <tr>
            <th>@_accordion-content-margin</th>
            <td>@accordion-content__margin</td>
            <td class="vars_value">0 0 @indent__xs</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion tab content margin</td>
        </tr>
        <tr>
            <th>@_accordion-content-padding</th>
            <td>@accordion-content__padding</td>
            <td class="vars_value">@tab-content__padding-top @tab-content__padding-right @tab-content__padding-bottom @tab-content__padding-left</td>
            <td class="vars_value">'' | false | value</td>
            <td>Accordion tab content padding</td>
        </tr>
    </table>
  </pre>

<h2 id="table-variables">Table variables</h2>
<h4 id="the-codelibtablecode-mixin-variables">The <code>.lib-table()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_table-width</th>
            <td>@table__width</td>
            <td class="vars_value">100%</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table width</td>
        </tr>
        <tr>
            <th>@_cell-padding-horizontal</th>
            <td>@table-cell__padding-horizontal</td>
            <td class="vars_value">@indent__s</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table cell horizontal padding</td>
        </tr>
        <tr>
            <th>@_cell-padding-vertical</th>
            <td>@table-cell__padding-vertical</td>
            <td class="vars_value">8px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table cell vertical padding</td>
        </tr>
        <tr>
            <th>@_table-margin-bottom</th>
            <td>@table__margin-bottom</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table margin bottom</td>
        </tr>
    </table>
  </pre>

<h2 id="table-typography-variables">Table typography variables</h2>
<h4 id="the-codelibtabletypographycode-mixin-variables">The <code>.lib-table-typography()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_table-td-font-size </th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table cell font size</td>
        </tr>
        <tr>
            <th>@_table-td-color</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table cell font color</td>
        </tr>
        <tr>
            <th>@_table-td-font-family</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table cell font family</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_table-td-font-weight</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table cell font weight</td>
        </tr>
        <tr>
            <th>@_table-td-line-height</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table cell line height</td>
        </tr>
        <tr>
            <th>@_table-td-font-style</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table cell font style</td>
        </tr>
        <tr>
            <th>@_table-th-font-size</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table header cell font size</td>
        </tr>
        <tr>
            <th>@_table-th-color</th>
            <td class="vars_value">@text__color__intense</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table header cell font color</td>
        </tr>
        <tr>
            <th>@_table-th-font-family</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table header cell font family</td>
        </tr>
        <tr>
            <th>@_table-th-font-weight</th>
            <td class="vars_value">@font-weight__bold</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table header cell font weight</td>
        </tr>
        <tr>
            <th>@_table-th-line-height</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table header cell line height</td>
        </tr>
        <tr>
            <th>@_table-th-font-style</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table header cell font style</td>
        </tr>
    </table>
  </pre>

<h2 id="table-caption-variables">Table caption variables</h2>
<h4 id="the-codelibtablecaptioncode-mixin-variables">The <code>.lib-table-caption()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_table-caption-hide</th>
            <td>@table-caption__hide</td>
            <td class="vars_value">true</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table caption is visible</td>
        </tr>
        <tr>
            <th>@_table-caption-font-size</th>
            <td>@table-caption__font-size</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table caption font size</td>
        </tr>
        <tr>
            <th>@_table-caption-color</th>
            <td>@table-caption__color</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table caption text color</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_table-caption-font-family</th>
            <td>@table-caption__font-family</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table caption font family</td>
        </tr>
        <tr>
            <th>@_table-caption-font-weight</th>
            <td>@table-caption__font-weight</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table caption font weight</td>
        </tr>
        <tr>
            <th>@_table-caption-font-style</th>
            <td>@table-caption__font-style</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table caption font style</td>
        </tr>
        <tr>
            <th>@_table-caption-line-height</th>
            <td>@table-caption__line-height</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table caption line height</td>
        </tr>
        <tr>
            <th>@_table-caption-alignment</th>
            <td>@table-caption__alignment</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table caption alignment</td>
        </tr>
        <tr>
            <th>@_table-caption-margin-top</th>
            <td>@table-caption__margin-top</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table caption top margin</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_table-caption-margin-bottom</th>
            <td>@table-caption__margin-bottom</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table caption bottom margin</td>
        </tr>
    </table>
  </pre>

<h2 id="table-cells-resize-variables">Table cells resize variables</h2>
<h4 id="the-codelibtableresizecode-mixin-variables">The <code>.lib-table-resize()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_th-padding-top</th>
            <td>@table-cell__padding-vertical / 2</td>
            <td class="vars_value">@_td-padding-top</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table header cell top padding</td>
        </tr>
        <tr>
            <th>@_th-padding-right</th>
            <td>@table-cell__padding-horizontal / 2</td>
            <td class="vars_value">@_td-padding-right</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table header cell right padding</td>
        </tr>
        <tr>
            <th>@_th-padding-bottom</th>
            <td>@table-cell__padding-vertical / 2</td>
            <td class="vars_value">@_td-padding-top</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table header cell bottom padding</td>
        </tr>
        <tr>
            <th>@_th-padding-left</th>
            <td>@table-cell__padding-horizontal / 2</td>
            <td class="vars_value">@_td-padding-right</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table header cell left padding</td>
        </tr>
        <tr>
            <th>@_td-padding-top</th>
            <td>@table-cell__padding-vertical / 2</td>
            <td class="vars_value">@table-cell__padding-vertical / 2</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table cell top padding</td>
        </tr>
        <tr>
            <th>@_td-padding-right</th>
            <td>@table-cell__padding-horizontal / 2</td>
            <td class="vars_value">@table-cell__padding-horizontal / 2</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table cell right padding</td>
        </tr>
        <tr>
            <th>@_td-padding-bottom</th>
            <td>@table-cell__padding-vertical / 2</td>
            <td class="vars_value">@_td-padding-top</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table cell bottom padding</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_td-padding-left</th>
            <td>@table-cell__padding-horizontal / 2</td>
            <td class="vars_value" nowrap="nowrap">@_td-padding-right</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table cell left padding</td>
        </tr>
    </table>
  </pre>

<h2 id="table-background-variables">Table background variables</h2>
<h4 id="the-codelibtablebackgroundcolorcode-mixin-variables">The <code>.lib-table-background-color()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Variables list names</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_table-background-color</th>
            <td>@table__background-color</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table background</td>
        </tr>
        <tr>
            <th>@_table-head-background-color</th>
            <td>@table-head__background-color</td>
            <td class="vars_value">@table__background-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table thead background</td>
        </tr>
        <tr>
            <th>@_table-foot-background-color</th>
            <td>@table-foot__background-color</td>
            <td class="vars_value">@table__background-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table tfoot background</td>
        </tr>
        <tr>
            <th>@_table-body-th-background-color</th>
            <td>@table-body-th__background-color</td>
            <td class="vars_value">@table__background-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table header cells background</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_table-td-background-color</th>
            <td>@table-td__background-color</td>
            <td class="vars_value">@table__background-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table cells background</td>
        </tr>
    </table>
  </pre>

<h2 id="table-borders-customization-variables">Table borders customization variables</h2>
<h4 id="the-codelibtableborderedcode-mixin-variables">The <code>.lib-table-bordered()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_table_type</th>
            <td>-</td>
            <td class="vars_value">normal</td>
            <td class="vars_value">normal | horizontal | vertical | light | clear | horizontal_body</td>
            <td>Table border settings. When is set to "horizontal_body", the table border settings are applied only for tbody</td>
        </tr>
        <tr>
            <th>@_table_border-width</th>
            <td>@table__border-width</td>
            <td class="vars_value" nowrap="nowrap">@border-width__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table border width</td>
        </tr>
        <tr>
            <th>@_table_border-style</th>
            <td>@table__border-style</td>
            <td class="vars_value">solid</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table border style</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_table_border-color</th>
            <td>@table__border-color</td>
            <td class="vars_value">@border-color__base</td>
            <td class="vars_value">'' | false | value</td>
            <td>Table border color</td>
        </tr>
    </table>
  </pre>

<h2 id="striped-table-variable">Striped table variable</h2>
<h4 id="the-codelibtablestripedcode-mixin-variables">The <code>.lib-table-striped()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Variables list names</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_stripped-background-color</th>
            <td class="vars_value">@table-cell-stripped__background-color</td>
            <td class="vars_value">lighten(@table-cell__hover__background-color, 15%)</td>
            <td class="vars_value">'' | false | value</td>
            <td>Striped cells background color</td>
        </tr>
        <tr>
            <th>@_stripped-color</th>
            <td class="vars_value">@table-cell-stripped__color</td>
            <td class="vars_value">@text__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Striped cells text color</td>
        </tr>
        <tr>
            <th>@_stripped-direction</th>
            <td class="vars_value">-</td>
            <td class="vars_value">horizontal</td>
            <td class="vars_value">horizontal | vertical</td>
            <td>Stripes direction</td>
        </tr>
        <tr>
            <th>@_stripped-highlight</th>
            <td class="vars_value">-</td>
            <td class="vars_value">odd</td>
            <td class="vars_value">odd | even</td>
            <td>Rows stripes are applied to</td>
        </tr>
    </table>
  </pre>
</div></article><article id="table-with-rows-hover-mixin-variables" class="section"><div class="docs"><a href="#table-with-rows-hover-mixin-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="table-with-rows-hover-mixin-variables">Table with rows hover mixin variables</h1>
<h4 id="the-codelibtablehovercode-mixin-variables">The <code>.lib-table-hover()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_table_cell-background-color-hover</th>
            <td>@table-cell__hover__background-color</td>
            <td class="vars_value">@panel__background-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Hovered table row background</td>
        </tr>
        <tr>
            <th>@_table_cell-odd-background-color-hover</th>
            <td>@table-cell__hover__background-color</td>
            <td class="vars_value">@_table_cell-background-color-hover</td>
            <td class="vars_value">'' | false | value</td>
            <td>Hovered table odd row background</td>
        </tr>
    </table>
  </pre>

<h2 id="responsive-table-technics-2-variables">Responsive table technics #2 variables</h2>
<h4 id="the-codelibtableresponsivecode-mixin-variables">The <code>.lib-table-responsive()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Variables list names</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_table-background-color-responsive</th>
            <td class="vars_value">@table-responsive__background-color</td>
            <td class="vars_value">@table__background-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Responsive table background</td>
        </tr>
        <tr>
            <th>@_table-th-background-color-responsive</th>
            <td class="vars_value">@table-responsive-th__background-color</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Responsive table header cells background</td>
        </tr>
        <tr>
            <th>@_reset-table-striped</th>
            <td class="vars_value">false</td>
            <td class="vars_value">-</td>
            <td class="vars_value">true | false</td>
            <td>Responsive table striped cells</td>
        </tr>
        <tr>
            <th>@_reset-table-hover</th>
            <td class="vars_value">false</td>
            <td class="vars_value">-</td>
            <td class="vars_value">true | false</td>
            <td>Responsive table hovered table row background</td>
        </tr>
        <tr>
            <th>@_table-responsive-cell-padding</th>
            <td class="vars_value">@table-responsive-cell__padding</td>
            <td class="vars_value">@indent__xs 0</td>
            <td class="vars_value">true | false</td>
            <td>Responsive table cells padding</td>
        </tr>
    </table>
  </pre>

<h2 id="tooltips-variables">Tooltips variables</h2>
<h4 id="the-codelibtooltipcode-mixin-variables">The <code>.lib-tooltip()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Global variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_tooltip-position</th>
            <td>-</td>
            <td class="vars_value">top</td>
            <td class="vars_value">top | right | bottom | left</td>
            <td>Side of the element tooltip is displayed on</td>
        </tr>
        <tr>
            <th>@_tooltip-selector-toggle</th>
            <td>-</td>
            <td class="vars_value">~".tooltip-toggle"</td>
            <td class="vars_value">'' | false | value</td>
            <td>The class name of the element that toggles tooltip</td>
        </tr>
        <tr>
            <th>@_tooltip-selector-content</th>
            <td>-</td>
            <td class="vars_value">~".tooltip-content"</td>
            <td class="vars_value">'' | false | value</td>
            <td>The tooltip content class name</td>
        </tr>
        <tr>
            <th>@_tooltip-background</th>
            <td>@tooltip__background</td>
            <td class="vars_value">@color-white</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip background color</td>
        </tr>
        <tr>
            <th>@_tooltip-border-color</th>
            <td>@tooltip__border-color</td>
            <td class="vars_value">#bbb</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip border color</td>
        </tr>
        <tr>
            <th>@_tooltip-border-width</th>
            <td>@tooltip__border-width</td>
            <td class="vars_value">1px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip border width</td>
        </tr>
        <tr>
            <th>@_tooltip-border-radius</th>
            <td>@tooltip__border-radius</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip border radius</td>
        </tr>
        <tr>
            <th>@_tooltip-color</th>
            <td>@tooltip__color</td>
            <td class="vars_value">@primary__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip text color</td>
        </tr>
        <tr>
            <th>@_tooltip-cursor</th>
            <td>@tooltip__cursor</td>
            <td class="vars_value">help</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip cursor</td>
        </tr>
        <tr>
            <th>@_tooltip-font-size</th>
            <td>@tooltip__font-size</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip font size</td>
        </tr>
        <tr>
            <th>@_tooltip-font-family</th>
            <td>@tooltip__font-family</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip font family</td>
        </tr>
        <tr>
            <th>@_tooltip-font-weight</th>
            <td>@tooltip__font-weight</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip font weight</td>
        </tr>
        <tr>
            <th>@_tooltip-font-style</th>
            <td>@tooltip__font-style</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip font style</td>
        </tr>
        <tr>
            <th>@_tooltip-line-height</th>
            <td>@tooltip__line-height</td>
            <td class="vars_value">1.4</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip line height</td>
        </tr>
        <tr>
            <th>@_tooltip-margin</th>
            <td>@tooltip__margin</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip margin</td>
        </tr>
        <tr>
            <th>@_tooltip-padding</th>
            <td>@tooltip__padding</td>
            <td class="vars_value">12px 16px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip padding</td>
        </tr>
        <tr>
            <th>@_tooltip-min-width</th>
            <td>@tooltip__min-width</td>
            <td class="vars_value">210px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip minimal width</td>
        </tr>
        <tr>
            <th>@_tooltip-max-width</th>
            <td>@tooltip__max-width</td>
            <td class="vars_value">360px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip maximal width</td>
        </tr>
        <tr>
            <th>@_tooltip-arrow-size</th>
            <td>@tooltip-arrow__size</td>
            <td class="vars_value">5px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip arrow size</td>
        </tr>
        <tr>
            <th>@_tooltip-arrow-offset</th>
            <td>@tooltip-arrow__offset</td>
            <td class="vars_value">10px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip arrow offset</td>
        </tr>
        <tr>
            <th>@_tooltip-z-index</th>
            <td>@tooltip__z-index</td>
            <td class="vars_value">100</td>
            <td class="vars_value">'' | false | value</td>
            <td>Tooltip z-index</td>
        </tr>
    </table>
  </pre>

<h2 id="components">Components</h2>
<h3 id="cross-components-variables">Cross Components variables</h3>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
      <tr>
        <th>@component__shadow-size__base</th>
        <td class="vars_value">5px</td>
        <td class="vars_value">constant</td>
        <td>Shadow size across all components. Used to count overlay zones sizes</td>
      </tr>
      <tr>
        <th>@component__box-shadow__base</th>
        <td class="vars_value">1px 1px @component__shadow-size__base rgba(0, 0, 0, .5)</td>
        <td class="vars_value">constant</td>
        <td>Shadow style</td>
      </tr>
      <tr>
        <th>@component-modal__opacity</th>
        <td class="vars_value">.98</td>
        <td class="vars_value">constant</td>
        <td>Default opacity for stacked components</td>
      </tr>
    </table>
  </pre>

<h2 id="utilities">Utilities</h2>
<h4 id="codelibcsscode-mixin-variables"><code>.lib-css()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Default value </th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_property</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Any css property</td>
        </tr>
        <tr>
            <th>@_value</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Any css value</td>
        </tr>
        <tr>
            <th>@_prefix</th>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | 1</td>
            <td>If set to "1" adds -ms-, -webkit- and -moz- prefixes to the property</td>
        </tr>
    </table>
  </pre>


<h4 id="codelibrotatecode-mixin-variables"><code>.lib-rotate()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Default value </th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@rotation</th>
            <td class="vars_value">''</td>
            <td class="vars_value">'' | false | value</td>
            <td>Transform rotate value, false or ''</td>
        </tr>
    </table>
  </pre>


<h4 id="codelibinputplaceholdercode-mixin-variables"><code>.lib-input-placeholder()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_input-placeholder-color</th>
            <td class="vars_value">@form-element-input-placeholder__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Input placeholder color</td>
        </tr>
        <tr>
            <th>@_input-placeholder-font-weight</th>
            <td class="vars_value">@form-element-input__font-weight</td>
            <td class="vars_value">'' | false | value</td>
            <td>Input placeholder font-weight</td>
        </tr>
    </table>
  </pre>


<h4 id="codelibbackgroundgradientcode-mixin-variables"><code>.lib-background-gradient()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Default value</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_background-gradient</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | true</td>
            <td>If set to 'true' the element has gradient background</td>
        </tr>
        <tr>
            <th>@_background-gradient-direction</th>
            <td class="vars_value">''</td>
            <td class="vars_value">'' | horizontal | vertical</td>
            <td>Gradient direction (horizontal or vertical)</td>
        </tr>
        <tr>
            <th>@_background-gradient-color-start</th>
            <td class="vars_value">''</td>
            <td class="vars_value">'' | false | value</td>
            <td>Gradient start color (any css color)</td>
        </tr>
        <tr>
            <th>@_background-gradient-color-end</th>
            <td class="vars_value">''</td>
            <td class="vars_value">'' | false | value</td>
            <td>Gradient end color (any css color) </td>
        </tr>
        <tr>
            <th>@_background-gradient-color-position</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | true</td>
            <td>Sets the background-color fallback property. When set to 'false', the background-color property will be set to @_background-gradient-color-end. When set to 'true', the background-color property will be set to @_background-gradient-color-start</td>
        </tr>
    </table>
  </pre>

<h4 id="codeliburlcheckcode-mixin-variables"><code>.lib-url-check()</code> mixin variables</h4>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin variable</th>
            <th class="vars_head">Allowed values</th>
            <th class="vars_head">Output variable</th>
            <th class="vars_head">Comment</th>
        </tr>
        <tr>
            <th>@_path</th>
            <td class="vars_value">'' | false | value</td>
            <td class="vars_value">@lib-url-check-output</td>
            <td>Passed url to wrap in 'url( ... )'. If the 'false' value passed mixin will return 'false'</td>
        </tr>
    </table>
  </pre>
</div></article></section><div class="bar bottom"><div hidden class="settings container"><!-- Icons from http://iconmonstr.com--><button title="Desktop (1280)" data-width='1280'><svg viewBox="0 0 412 386" height="24" width="26" class="icon"><path d="m147.6,343.9c-4.5,15.9-26.2,37.6-42.1,42.1h201c-15.3,-4-38.1,-26.8-42.1,-42.1H147.6zM387,0.5H25c-13.8,0-25,11.2-25,25V294c0,13.8 11.2,25 25,25h362c13.8,0 25,-11.2 25,-25V25.5C412,11.7 400.8,0.5 387,0.5zM369.9,238.2H42.1L42.1,42.6 369.9,42.6V238.2z"></path></svg></button><button title="Laptop (1024)" data-width='1024'><svg viewBox="0 0 384 312" height="23" width="28" class="icon"><path d="m349.2,20.5c0,-11-9,-20-20,-20H53.6c-11,0-20,9-20,20v194H349.2v-194zm-27,167H60.6V27.5H322.2v160zm28,42H32.6L2.6,282.1c-3.5,6.2-3.5,13.8 0.1,19.9 3.6,6.2 10.2,9.9 17.3,9.9H363.1c7.1,0 13.7,-3.8 17.3,-10 3.6,-6.2 3.6,-13.8 0,-20l-30.2,-52.5zm-196.9,54 8,-23.5h60.5l8,23.5h-76.5z"></path></svg></button><button title="Tablet (768)" data-width='768'><svg viewBox="0 0 317 412" height="24" width="18" class="icon"><path d="M 316.5,380 V 32 c 0,-17.7 -14.3,-32 -32,-32 H 32 C 14.3,0 0,14.3 0,32 v 348 c 0,17.7 14.3,32 32,32 h 252.5 c 17.7,0 32,-14.3 32,-32 z M 40,367 V 45 H 276.5 V 367 H 40 z m 109.8,22.7 c 0,-4.7 3.8,-8.5 8.5,-8.5 4.7,0 8.5,3.8 8.5,8.5 0,4.7 -3.8,8.5 -8.5,8.5 -4.7,0 -8.5,-3.8 -8.5,-8.5 z"></path></svg></button><button title="Smart phone (320)" data-width='320'><svg viewBox="0 0 224 412" height="24" width="13" class="icon"><path d="M 190.7,0 H 33 C 14.8,0 0,14.8 0,33 v 346 c 0,18.2 14.8,33 33,33 h 157.7 c 18.2,0 33,-14.8 33,-33 V 33 c 0,-18.2 -14.8,-33 -33,-33 z M 94.3,30.2 h 37 c 2.2,0 4,1.8 4,4 0,2.2 -1.8,4 -4,4 h -37 c -2.2,0 -4,-1.8 -4,-4 0,-2.2 1.8,-4 4,-4 z m 18.5,362.8 c -8.8,0 -16,-7.2 -16,-16 0,-8.8 7.2,-16 16,-16 8.8,0 16,7.2 16,16 0,8.8 -7.2,16 -16,16 z M 198.6,343.8 H 25.1 V 68.2 h 173.5 v 275.5 z"></path></svg></button><button title="Feature phone (240)" data-width='240'><svg viewBox="0 0 201 412" height="24" width="12" class="icon"><path d="M 165.5,0.2 V 45 H 25 c -13.8,0 -25,11.2 -25,25 V 387 c 0,13.8 11.2,25 25,25 h 150.5 c 13.8,0 25,-11.2 25,-25 V 0.2 h -35 z M 65.2,366.5 H 34.2 v -24.5 h 31 v 24.5 z m 0,-44.3 H 34.2 v -24.5 h 31 v 24.5 z m 50.5,44.3 H 84.7 v -24.5 h 31 v 24.5 z m 0,-44.3 H 84.7 v -24.5 h 31 v 24.5 z m 50.5,44.3 h -31 v -24.5 h 31 v 24.5 z m 0,-44.3 h -31 v -24.5 h 31 v 24.5 z m 0,-59.3 h -132 V 95.4 h 132 V 262.9 z"></path></svg></button><button title="Auto (100%)" data-width="auto" class="auto is-active">Auto</button></div></div><script>(function(){var a=[{title:"actions-toolbar",filename:"actions-toolbar",url:"actions-toolbar.html"},{title:"Actions toolbar",filename:"actions-toolbar",url:"actions-toolbar.html#actions-toolbar"},{title:"Actions toolbar mixin variables",filename:"actions-toolbar",url:"actions-toolbar.html#actions-toolbar-mixin-variables"},{title:"Actions toolbar alignment",filename:"actions-toolbar",url:"actions-toolbar.html#actions-toolbar-alignment"},{title:"Reverse primary and secondary blocks",filename:"actions-toolbar",url:"actions-toolbar.html#reverse-primary-and-secondary-blocks"},{title:"Actions toolbar indents customizations",filename:"actions-toolbar",url:"actions-toolbar.html#actions-toolbar-indents-customizations"},{title:"Responsive actions toolbar",filename:"actions-toolbar",url:"actions-toolbar.html#responsive-actions-toolbar"},{title:"breadcrumbs",filename:"breadcrumbs",url:"breadcrumbs.html"},{title:"Breadcrumbs",filename:"breadcrumbs",url:"breadcrumbs.html#breadcrumbs"},{title:"Breadcrumbs variables",filename:"breadcrumbs",url:"breadcrumbs.html#breadcrumbs-variables"},{title:"Button-styled breadcrumbs with gradient background, border, and no separating symbol",filename:"breadcrumbs",url:"breadcrumbs.html#buttonstyled-breadcrumbs-with-gradient-background-border-and-no-separating-symbol"},{title:"Breadcrumbs with solid background",filename:"breadcrumbs",url:"breadcrumbs.html#breadcrumbs-with-solid-background"},{title:"buttons",filename:"buttons",url:"buttons.html"},{title:"Default button",filename:"buttons",url:"buttons.html#default-button"},{title:"Button variables",filename:"buttons",url:"buttons.html#button-variables"},{title:"Button as an icon",filename:"buttons",url:"buttons.html#button-as-an-icon"},{title:"Button with an icon on the left or right side of the text",filename:"buttons",url:"buttons.html#button-with-an-icon-on-the-left-or-right-side-of-the-text"},{title:"Button with fixed width",filename:"buttons",url:"buttons.html#button-with-fixed-width"},{title:"Primary button",filename:"buttons",url:"buttons.html#primary-button"},{title:"Primary button variables",filename:"buttons",url:"buttons.html#primary-button-variables"},{title:"Button with gradient background",filename:"buttons",url:"buttons.html#button-with-gradient-background"},{title:"Button as a link",filename:"buttons",url:"buttons.html#button-as-a-link"},{title:"Button as a link variables",filename:"buttons",url:"buttons.html#button-as-a-link-variables"},{title:"Link as a button",filename:"buttons",url:"buttons.html#link-as-a-button"},{title:"Button reset",filename:"buttons",url:"buttons.html#button-reset"},{title:"Button revert secondary color",filename:"buttons",url:"buttons.html#button-revert-secondary-color"},{title:"Button revert secondary color variables",filename:"buttons",url:"buttons.html#button-revert-secondary-color-variables"},{title:"Button revert secondary size",filename:"buttons",url:"buttons.html#button-revert-secondary-size"},{title:"Button revert secondary size variables",filename:"buttons",url:"buttons.html#button-revert-secondary-size-variables"},{title:"components",filename:"components",url:"components.html"},{title:"Components",filename:"components",url:"components.html#components"},{title:"Components Variables",filename:"components",url:"components.html#components-variables"},{title:"dropdowns",filename:"dropdowns",url:"dropdowns.html"},{title:"Drop-down and split buttons mixins",filename:"dropdowns",url:"dropdowns.html#dropdown-and-split-buttons-mixins"},{title:"Drop-down",filename:"dropdowns",url:"dropdowns.html#dropdown"},{title:"Drop-down variables",filename:"dropdowns",url:"dropdowns.html#dropdown-variables"},{title:"Drop-down with icon customization",filename:"dropdowns",url:"dropdowns.html#dropdown-with-icon-customization"},{title:"Modify dropdown list styles",filename:"dropdowns",url:"dropdowns.html#modify-dropdown-list-styles"},{title:"Split button",filename:"dropdowns",url:"dropdowns.html#split-button"},{title:"Split button variables",filename:"dropdowns",url:"dropdowns.html#split-button-variables"},{title:"Split button - button styling",filename:"dropdowns",url:"dropdowns.html#split-button-button-styling"},{title:"Split button icon customization",filename:"dropdowns",url:"dropdowns.html#split-button-icon-customization"},{title:"Split button drop-down list customization",filename:"dropdowns",url:"dropdowns.html#split-button-dropdown-list-customization"},{title:"forms",filename:"forms",url:"forms.html"},{title:"Forms mixins",filename:"forms",url:"forms.html#forms-mixins"},{title:"Global forms elements customization",filename:"forms",url:"forms.html#global-forms-elements-customization"},{title:"Fieldsets & fields customization",filename:"forms",url:"forms.html#fieldsets-fields-customization"},{title:"Fieldset and legend customization variables",filename:"forms",url:"forms.html#fieldset-and-legend-customization-variables"},{title:"Fields customization variables",filename:"forms",url:"forms.html#fields-customization-variables"},{title:"Required fields message customization variables",filename:"forms",url:"forms.html#required-fields-message-customization-variables"},{title:"Form element inputs customization",filename:"forms",url:"forms.html#form-element-inputs-customization"},{title:"Form element inputs customization variables",filename:"forms",url:"forms.html#form-element-inputs-customization-variables"},{title:"Form element choice",filename:"forms",url:"forms.html#form-element-choice"},{title:"Form element choice variables",filename:"forms",url:"forms.html#form-element-choice-variables"},{title:"Custom color",filename:"forms",url:"forms.html#custom-color"},{title:"Input number - input-text view",filename:"forms",url:"forms.html#input-number-inputtext-view"},{title:"Input search - input-text view",filename:"forms",url:"forms.html#input-search-inputtext-view"},{title:"Form validation",filename:"forms",url:"forms.html#form-validation"},{title:"Form validation variables",filename:"forms",url:"forms.html#form-validation-variables"},{title:"icons",filename:"icons",url:"icons.html"},{title:"Icons",filename:"icons",url:"icons.html#icons"},{title:"Icon with image or sprite",filename:"icons",url:"icons.html#icon-with-image-or-sprite"},{title:"Icon with image or sprite variables",filename:"icons",url:"icons.html#icon-with-image-or-sprite-variables"},{title:"Icon position for an icon with image or sprite",filename:"icons",url:"icons.html#icon-position-for-an-icon-with-image-or-sprite"},{title:"Position for icon with image or sprite mixin variables",filename:"icons",url:"icons.html#position-for-icon-with-image-or-sprite-mixin-variables"},{title:"Icon sprite position (with grid)",filename:"icons",url:"icons.html#icon-sprite-position-with-grid"},{title:"Icon sprite position variables",filename:"icons",url:"icons.html#icon-sprite-position-variables"},{title:"Image/sprite icon size",filename:"icons",url:"icons.html#imagesprite-icon-size"},{title:"Image/sprite icon size variables",filename:"icons",url:"icons.html#imagesprite-icon-size-variables"},{title:"Font icon",filename:"icons",url:"icons.html#font-icon"},{title:"Font icon variables",filename:"icons",url:"icons.html#font-icon-variables"},{title:"Change the size of font icon",filename:"icons",url:"icons.html#change-the-size-of-font-icon"},{title:"Change the size of font icon variables",filename:"icons",url:"icons.html#change-the-size-of-font-icon-variables"},{title:"Hide icon text",filename:"icons",url:"icons.html#hide-icon-text"},{title:"Sprite and font icons for Blank theme",filename:"icons",url:"icons.html#sprite-and-font-icons-for-blank-theme"},{title:"layout",filename:"layout",url:"layout.html"},{title:"Layout",filename:"layout",url:"layout.html#layout"},{title:"Layout global variables",filename:"layout",url:"layout.html#layout-global-variables"},{title:"Page layouts",filename:"layout",url:"layout.html#page-layouts"},{title:"Layout column",filename:"layout",url:"layout.html#layout-column"},{title:"Layout column variables",filename:"layout",url:"layout.html#layout-column-variables"},{title:"Layout width",filename:"layout",url:"layout.html#layout-width"},{title:"Layout width variables",filename:"layout",url:"layout.html#layout-width-variables"},{title:"lib",filename:"lib",url:"lib.html"},{title:"Including Magento UI library to your theme",filename:"lib",url:"lib.html#including-magento-ui-library-to-your-theme"},{title:"loaders",filename:"loaders",url:"loaders.html"},{title:"Loaders",filename:"loaders",url:"loaders.html#loaders"},{title:"Default loader variables",filename:"loaders",url:"loaders.html#default-loader-variables"},{title:"Loading",filename:"loaders",url:"loaders.html#loading"},{title:"Loading default variables",filename:"loaders",url:"loaders.html#loading-default-variables"},{title:"messages",filename:"messages",url:"messages.html"},{title:"Messages",filename:"messages",url:"messages.html#messages"},{title:"Information message",filename:"messages",url:"messages.html#information-message"},{title:"Warning message",filename:"messages",url:"messages.html#warning-message"},{title:"Error message",filename:"messages",url:"messages.html#error-message"},{title:"Success message",filename:"messages",url:"messages.html#success-message"},{title:"Notice message",filename:"messages",url:"messages.html#notice-message"},{title:"Message with inner icon",filename:"messages",url:"messages.html#message-with-inner-icon"},{title:"Message with lateral icon",filename:"messages",url:"messages.html#message-with-lateral-icon"},{title:"Custom message style",filename:"messages",url:"messages.html#custom-message-style"},{title:"Messages global variables",filename:"messages",url:"messages.html#messages-global-variables"},{title:"pages",filename:"pages",url:"pages.html"},{title:"Pagination HTML markup",filename:"pages",url:"pages.html#pagination-html-markup"},{title:"Pagination variables",filename:"pages",url:"pages.html#pagination-variables"},{title:"Pagination with label and gradient background on links",filename:"pages",url:"pages.html#pagination-with-label-and-gradient-background-on-links"},{title:'Pagination with "previous"..."next" text links and label',filename:"pages",url:"pages.html#pagination-with-previousnext-text-links-and-label"},{title:"Pagination without label, with solid background",filename:"pages",url:"pages.html#pagination-without-label-with-solid-background"},{title:"popups",filename:"popups",url:"popups.html"},{title:"Popups",filename:"popups",url:"popups.html#popups"},{title:"Popup variables",filename:"popups",url:"popups.html#popup-variables"},{title:"Window overlay mixin variables",filename:"popups",url:"popups.html#window-overlay-mixin-variables"},{title:"Fixed height popup",filename:"popups",url:"popups.html#fixed-height-popup"},{title:"Fixed content height popup",filename:"popups",url:"popups.html#fixed-content-height-popup"},{title:"Margins for header, content and footer block in popup",filename:"popups",url:"popups.html#margins-for-header-content-and-footer-block-in-popup"},{title:"Popup titles styled as theme headings",filename:"popups",url:"popups.html#popup-titles-styled-as-theme-headings"},{title:"Popup action toolbar",filename:"popups",url:"popups.html#popup-action-toolbar"},{title:"Popup Close button without an icon",filename:"popups",url:"popups.html#popup-close-button-without-an-icon"},{title:"Modify the icon of popup Close button",filename:"popups",url:"popups.html#modify-the-icon-of-popup-close-button"},{title:"Modify overlay styles",filename:"popups",url:"popups.html#modify-overlay-styles"},{title:"rating",filename:"rating",url:"rating.html"},{title:"Ratings",filename:"rating",url:"rating.html#ratings"},{title:"Global rating variables",filename:"rating",url:"rating.html#global-rating-variables"},{title:"Rating with vote",filename:"rating",url:"rating.html#rating-with-vote"},{title:"Rating with vote icons number customization",filename:"rating",url:"rating.html#rating-with-vote-icons-number-customization"},{title:"Rating with vote icons colors customization",filename:"rating",url:"rating.html#rating-with-vote-icons-colors-customization"},{title:"Rating with vote icons symbol customization",filename:"rating",url:"rating.html#rating-with-vote-icons-symbol-customization"},{title:"Accessible rating with vote",filename:"rating",url:"rating.html#accessible-rating-with-vote"},{title:"Rating summary",filename:"rating",url:"rating.html#rating-summary"},{title:"Rating summary icons number customization",filename:"rating",url:"rating.html#rating-summary-icons-number-customization"},{title:"Rating summary icons color customization",filename:"rating",url:"rating.html#rating-summary-icons-color-customization"},{title:"Rating summary icons symbol customization",filename:"rating",url:"rating.html#rating-summary-icons-symbol-customization"},{title:"Rating summary hide label",filename:"rating",url:"rating.html#rating-summary-hide-label"},{title:"Rating summary multiple ratings",filename:"rating",url:"rating.html#rating-summary-multiple-ratings"},{title:"Rating hide label mixin",filename:"rating",url:"rating.html#rating-hide-label-mixin"},{title:"resets",filename:"resets",url:"resets.html"},{title:"Resets",filename:"resets",url:"resets.html#resets"},{title:"responsive",filename:"responsive",url:"responsive.html"},{title:"Responsive",filename:"responsive",url:"responsive.html#responsive"},{title:"Responsive mixins usage",filename:"responsive",url:"responsive.html#responsive-mixins-usage"},{title:"Media query style groups separation variables",filename:"responsive",url:"responsive.html#media-query-style-groups-separation-variables"},{title:"Responsive breakpoints",filename:"responsive",url:"responsive.html#responsive-breakpoints"},{title:"sections",filename:"sections",url:"sections.html"},{title:"Tabs and accordions",filename:"sections",url:"sections.html#tabs-and-accordions"},{title:"Tabs",filename:"sections",url:"sections.html#tabs"},{title:"Tabs mixin variables",filename:"sections",url:"sections.html#tabs-mixin-variables"},{title:"Tabs with content top border",filename:"sections",url:"sections.html#tabs-with-content-top-border"},{title:"Accordion",filename:"sections",url:"sections.html#accordion"},{title:"Accordion mixin variables",filename:"sections",url:"sections.html#accordion-mixin-variables"},{title:"Responsive tabs",filename:"sections",url:"sections.html#responsive-tabs"},{title:"Tabs Base",filename:"sections",url:"sections.html#tabs-base"},{title:"Accordion Base",filename:"sections",url:"sections.html#accordion-base"},{title:"tables",filename:"tables",url:"tables.html"},{title:"Tables",filename:"tables",url:"tables.html#tables"},{title:"Table mixin variables",filename:"tables",url:"tables.html#table-mixin-variables"},{title:"Table typography",filename:"tables",url:"tables.html#table-typography"},{title:"Table typography mixin variables",filename:"tables",url:"tables.html#table-typography-mixin-variables"},{title:"Table caption",filename:"tables",url:"tables.html#table-caption"},{title:"Table caption mixin variables",filename:"tables",url:"tables.html#table-caption-mixin-variables"},{title:"Table cells resize",filename:"tables",url:"tables.html#table-cells-resize"},{title:"Table cells resize variables",filename:"tables",url:"tables.html#table-cells-resize-variables"},{title:"Table background customization",filename:"tables",url:"tables.html#table-background-customization"},{title:"Table background mixin variables",filename:"tables",url:"tables.html#table-background-mixin-variables"},{title:"Table borders customization",filename:"tables",url:"tables.html#table-borders-customization"},{title:"Table borders mixin variables",filename:"tables",url:"tables.html#table-borders-mixin-variables"},{title:"Table with horizontal borders",filename:"tables",url:"tables.html#table-with-horizontal-borders"},{title:"Table with vertical borders",filename:"tables",url:"tables.html#table-with-vertical-borders"},{title:"Table with light borders",filename:"tables",url:"tables.html#table-with-light-borders"},{title:"Table without borders",filename:"tables",url:"tables.html#table-without-borders"},{title:"Striped table",filename:"tables",url:"tables.html#striped-table"},{title:"Striped table mixin variables",filename:"tables",url:"tables.html#striped-table-mixin-variables"},{title:"Table with rows hover",filename:"tables",url:"tables.html#table-with-rows-hover"},{title:"Table with rows hover mixin variables",filename:"tables",url:"tables.html#table-with-rows-hover-mixin-variables"},{title:"Responsive table technics #1",filename:"tables",url:"tables.html#responsive-table-technics-1"},{title:"Responsive table technics #2",filename:"tables",url:"tables.html#responsive-table-technics-2"},{title:"Responsive table technics #2 mixin variables",filename:"tables",url:"tables.html#responsive-table-technics-2-mixin-variables"},{title:"tooltips",filename:"tooltips",url:"tooltips.html"},{title:"Tooltips",filename:"tooltips",url:"tooltips.html#tooltips"},{title:"Tooltips variables",filename:"tooltips",url:"tooltips.html#tooltips-variables"},{title:"typography",filename:"typography",url:"typography.html"},{title:"Typogrphy",filename:"typography",url:"typography.html#typogrphy"},{title:"Typography variables",filename:"typography",url:"typography.html#typography-variables"},{title:"Font-size mixin",filename:"typography",url:"typography.html#fontsize-mixin"},{title:"Line-height mixin",filename:"typography",url:"typography.html#lineheight-mixin"},{title:"Word breaking mixin",filename:"typography",url:"typography.html#word-breaking-mixin"},{title:"Font face mixin",filename:"typography",url:"typography.html#font-face-mixin"},{title:"Text overflow mixin",filename:"typography",url:"typography.html#text-overflow-mixin"},{title:"Text hide",filename:"typography",url:"typography.html#text-hide"},{title:"Hyphens",filename:"typography",url:"typography.html#hyphens"},{title:"Font style and color",filename:"typography",url:"typography.html#font-style-and-color"},{title:"Font style mixin variables",filename:"typography",url:"typography.html#font-style-mixin-variables"},{title:"Reset list styles",filename:"typography",url:"typography.html#reset-list-styles"},{title:"Reset list styles variables",filename:"typography",url:"typography.html#reset-list-styles-variables"},{title:"Inline-block list item styling",filename:"typography",url:"typography.html#inlineblock-list-item-styling"},{title:"Link styling mixin",filename:"typography",url:"typography.html#link-styling-mixin"},{title:"Link styling mixin variables",filename:"typography",url:"typography.html#link-styling-mixin-variables"},{title:"Heading styling mixin",filename:"typography",url:"typography.html#heading-styling-mixin"},{title:"Base typography mixins",filename:"typography",url:"typography.html#base-typography-mixins"},{title:"Base typography mixin variables",filename:"typography",url:"typography.html#base-typography-mixin-variables"},{title:"Headings typography mixin",filename:"typography",url:"typography.html#headings-typography-mixin"},{title:"Headings typography mixin variables",filename:"typography",url:"typography.html#headings-typography-mixin-variables"},{title:"Typography links mixin",filename:"typography",url:"typography.html#typography-links-mixin"},{title:"Typography lists mixin",filename:"typography",url:"typography.html#typography-lists-mixin"},{title:"Typography lists mixin variables",filename:"typography",url:"typography.html#typography-lists-mixin-variables"},{title:"Typography code elements mixin",filename:"typography",url:"typography.html#typography-code-elements-mixin"},{title:"Typography code mixin variables",filename:"typography",url:"typography.html#typography-code-mixin-variables"},{title:"Typography blockquote",filename:"typography",url:"typography.html#typography-blockquote"},{title:"Typography blockquote mixin variables",filename:"typography",url:"typography.html#typography-blockquote-mixin-variables"},{title:"utilities",filename:"utilities",url:"utilities.html"},{title:"Utilities",filename:"utilities",url:"utilities.html#utilities"},{title:".lib-clearfix()",filename:"utilities",url:"utilities.html#libclearfix"},{title:".lib-visibility-hidden()",filename:"utilities",url:"utilities.html#libvisibilityhidden"},{title:".lib-visually-hidden()",filename:"utilities",url:"utilities.html#libvisuallyhidden"},{title:".lib-visually-hidden-reset()",filename:"utilities",url:"utilities.html#libvisuallyhiddenreset"},{title:".lib-css()",filename:"utilities",url:"utilities.html#libcss"},{title:".lib-css() variables",filename:"utilities",url:"utilities.html#libcss-variables"},{title:".lib-rotate()",filename:"utilities",url:"utilities.html#librotate"},{title:".lib-rotate() variables",filename:"utilities",url:"utilities.html#librotate-variables"},{title:".lib-input-placeholder()",filename:"utilities",url:"utilities.html#libinputplaceholder"},{title:".lib-input-placeholder() variables",filename:"utilities",url:"utilities.html#libinputplaceholder-variables"},{title:".lib-background-gradient()",filename:"utilities",url:"utilities.html#libbackgroundgradient"},{title:".lib-background-gradient() variables",filename:"utilities",url:"utilities.html#libbackgroundgradient-variables"},{title:".lib-url-check()",filename:"utilities",url:"utilities.html#liburlcheck"},{title:".lib-url-check() variables",filename:"utilities",url:"utilities.html#liburlcheck-variables"},{title:"variables",filename:"variables",url:"variables.html"},{title:"List of Global Variables",filename:"variables",url:"variables.html#list-of-global-variables"},{title:"Table with rows hover mixin variables",filename:"variables",url:"variables.html#table-with-rows-hover-mixin-variables"},{title:"docs",filename:"docs",url:"docs.html"},{title:"Documentation",filename:"docs",url:"docs.html#documentation"}];(function(){"use strict";var b=function(a,b){return Array.prototype.indexOf.call(a,b)!==-1},c=function(a,b){return Array.prototype.filter.call(a,b)},d=function(a,b){return Array.prototype.forEach.call(a,b)},e=document.getElementsByTagName("body")[0];e.addEventListener("click",function(a){var b=a.target;b.tagName.toLowerCase()==="svg"&&(b=b.parentNode);var c=!1;b.dataset.toggle!=null&&(a.preventDefault(),b.classList.contains("is-active")||(c=!0)),d(e.querySelectorAll("[data-toggle]"),function(a){a.classList.remove("is-active"),document.getElementById(a.dataset.toggle).hidden=!0}),c&&(b.classList.add("is-active"),document.getElementById(b.dataset.toggle).hidden=!1)}),function(){var f=e.getElementsByClassName("nav")[0];if(!f)return;var g=document.createElement("ul");g.className="nav-results",g.id="nav-search",g.hidden=!0,d(a,function(a){var b,c,d;b=document.createElement("li"),b._title=a.title.toLowerCase(),b.hidden=!0,b.appendChild(c=document.createElement("a")),c.href=a.url,c.innerHTML=a.title,c.appendChild(d=document.createElement("span")),d.innerHTML=a.filename,d.className="nav-results-filename",g.appendChild(b)}),f.appendChild(g);var h=g.children,i=function(a){d(h,function(a){a.hidden=!0});var b=this.value.toLowerCase(),e=[];b!==""&&(e=c(h,function(a){return a._title.indexOf(b)!==-1})),e.length>0?(d(e,function(a){a.hidden=!1}),g.hidden=!1):g.hidden=!0},j=f.querySelector('input[type="search"]');j.addEventListener("keyup",i),j.addEventListener("focus",i),e.addEventListener("click",function(a){if(a.target.classList&&a.target.classList.contains("search"))return;g.hidden=!0}),g.addEventListener("click",function(a){j.value=""});var k=document.createElement("ul");k.id="nav-toc",k.hidden=!0,k.className="nav-results toc-list",c(e.getElementsByTagName("*"),function(a){return b(["h1","h2","h3"],a.tagName.toLowerCase())}).map(function(a){var b=document.createElement("li"),c=document.createElement("a"),d=a.tagName.toLowerCase()[1];c.classList.add("level-"+d),b.appendChild(c),c.href="#"+a.id,c.innerHTML=a.innerHTML,k.appendChild(b)}),f.appendChild(k)}()})(),function(){"use strict";if(location.hash==="#__preview__"||location.protocol==="data:")return;var a=function(a,b){return Array.prototype.forEach.call(a,b)},b=function(a,b){var e=Array.prototype.slice.call(arguments,2);return d(a,function(a){return(c(b)?b||a:a[b]).apply(a,e)})},c=function(a){return Object.prototype.toString.call(a)==="[object Function]"},d=function(a,b){return Array.prototype.map.call(a,b)},e=function(a,b){return d(a,function(a){return a[b]})},f=function(a){var b={},c=a.split(";");for(var d=0;c.length>d;d++){var e=c[d].trim().split("=");b[e[0]]=e[1]}return b},g=function(a,c){return b(e(a,"classList"),"remove",c)},h=function(a,b){a.contentDocument.defaultView.postMessage(b,"*")},i=document.getElementsByTagName("head")[0],j=document.getElementsByTagName("body")[0],k=e(i.querySelectorAll('style[type="text/preview"]'),"innerHTML").join(""),l=e(i.querySelectorAll('script[type="text/preview"]'),"innerHTML").join(""),m=location.href.split("#")[0]+"#__preview__",n=document.createElement("iframe");n.src="data:text/html,",j.appendChild(n),n.addEventListener("load",function(){var b={sameOriginDataUri:!0};try{this.contentDocument,this.contentDocument||(b.sameOriginDataUri=!1)}catch(c){b.sameOriginDataUri=!1}this.parentNode.removeChild(this),a(j.getElementsByTagName("textarea"),function(a,c){o(a,b,c),q(),p(a)})});var o=function(a,b,c){var d,e,f;d=document.createElement("div"),d.appendChild(e=document.createElement("div")),d.className="preview",e.appendChild(f=document.createElement("iframe")),e.className="resizeable",f.setAttribute("scrolling","no"),f.name="iframe"+c++,f.addEventListener("load",function(){var c,d,e,f,g,i,j;j=this.contentDocument;if(!b.sameOriginDataUri&&this.src!==m)return;this.src===m&&(c=j.createElement("html"),c.appendChild(j.createElement("head")),c.appendChild(d=j.createElement("body")),d.innerHTML=a.textContent,j.replaceChild(c,j.documentElement)),g=j.createElement("head"),g.appendChild(f=j.createElement("style")),g.appendChild(e=j.createElement("script")),e.textContent=l,f.textContent=k,i=j.getElementsByTagName("head")[0],i.parentNode.replaceChild(g,i),h(this,"getHeight")});var g;b.sameOriginDataUri?g="data:text/html;charset=utf-8,"+encodeURIComponent("<!doctype html><html><head></head></body>"+a.textContent):g=m,f.setAttribute("src",g);var i=function(){f.contentDocument.body.innerHTML=this.value,h(f,"getHeight")};a.addEventListener("keypress",i),a.addEventListener("keyup",i),a.parentNode.insertBefore(d,a)},p=function(a){var b=document.createElement("div");b.className="preview-code",b.style.position="absolute",b.style.left="-9999px",j.appendChild(b);var c=parseInt(window.getComputedStyle(a).getPropertyValue("max-height"),10),d=function(a){b.textContent=this.value+"\n";var d=b.offsetHeight+2;d>=c?this.style.overflow="auto":this.style.overflow="hidden",this.style.height=b.offsetHeight+2+"px"};a.addEventListener("keypress",d),a.addEventListener("keyup",d),d.call(a)},q=function(){var b=j.getElementsByClassName("settings")[0],c=j.getElementsByClassName("resizeable"),d=30,e=function(b){document.cookie="preview-width="+b,a(c,function(a){b==="auto"&&(b=a.parentNode.offsetWidth),a.style.width=b+"px",h(a.getElementsByTagName("iframe")[0],"getHeight")})},i=f(document.cookie)["preview-width"];if(i){e(i),g(b.getElementsByClassName("is-active"),"is-active");var k=b.querySelector('button[data-width="'+i+'"]');k&&k.classList.add("is-active")}window.addEventListener("message",function(a){if(a.data==null||!a.source)return;var b=a.data,c=document.getElementsByName(a.source.name)[0];b.height!=null&&c&&(c.parentNode.style.height=b.height+d+"px")},!1),b&&c.length>0&&(b.hidden=!1,b.addEventListener("click",function(a){var c=a.target.tagName.toLowerCase(),d;if(c==="button")d=a.target;else{if(c!=="svg")return;d=a.target.parentNode}a.preventDefault(),g(b.getElementsByClassName("is-active"),"is-active"),d.classList.add("is-active");var f=d.dataset.width;e(f)}))}}()})()</script></body></html><!-- Generated with StyleDocco (http://jacobrask.github.com/styledocco). -->