@charset "UTF-8";*{-webkit-box-sizing:border-box;box-sizing:border-box}.is-vishidden{position:absolute!important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)}@font-face{font-family:"Allianz Neo";font-style:normal;font-weight:400;src:url(../../fonts/allianz-neo/AllianzNeo-Regular.woff2) format("woff2"),url(../../fonts/allianz-neo/AllianzNeo-Regular.woff) format("woff")}@font-face{font-family:"Allianz Neo";font-style:normal;font-weight:700;src:url(../../fonts/allianz-neo/AllianzNeo-Bold.woff2) format("woff2"),url(../../fonts/allianz-neo/AllianzNeo-Bold.woff) format("woff")}@font-face{font-family:"Allianz Neo";font-style:normal;font-weight:300;src:url(../../fonts/allianz-neo/AllianzNeo-Light.woff2) format("woff2"),url(../../fonts/allianz-neo/AllianzNeo-Light.woff) format("woff")}@font-face{font-family:"Allianz Neo";font-style:normal;font-weight:600;src:url(../../fonts/allianz-neo/AllianzNeo-SemiBold.woff2) format("woff2"),url(../../fonts/allianz-neo/AllianzNeo-SemiBold.woff) format("woff")}html{font-family:'Allianz Neo',sans-serif}a{color:inherit;text-decoration:none}.allianz-pl-header{background:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;padding:10px 10px}.allianz-pl-header__actions{position:absolute;top:5px;right:5px;text-transform:none;font-size:12px}.allianz-pl-header__actions a{color:#767676}.allianz-pl-header__actions a:hover{text-decoration:underline}.sg-allianz-logo-inverted{width:165px;height:30px}#patternlab-body,#patternlab-html{margin:0;padding:0;background:#fff;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}.sg-header{background-color:#fff;border-bottom:1px solid #d9d9d9;box-shadow:0 -2px 8px #888;position:fixed;top:0;left:0;z-index:4;width:100%}.sticky{width:100%;position:fixed;top:0;background-color:#fff}.sg-header ul{padding:0;margin:0;list-style:none}.sg-header .sg-controls a,.sg-header .sg-nav-container a{font-size:16px;color:#414141;text-decoration:none;line-height:1;padding:1em .7em;-webkit-transition:background .1s ease-out;transition:background .1s ease-out;-webkit-transition:color .1s ease-out;transition:color .1s ease-out}.sg-header .sg-controls a.active,.sg-header .sg-controls a:focus,.sg-header .sg-controls a:hover,.sg-header .sg-nav-container a.active,.sg-header .sg-nav-container a:focus,.sg-header .sg-nav-container a:hover{color:#006192}.sg-header .sg-nav-container a.sg-acc-handle{padding-right:15px}.sg-header .sg-nav-container a.sg-acc-handle.active{color:#414141;font-weight:700}.sg-nav-toggle{display:inline-block;position:relative;z-index:2;padding:10px}@media all and (min-width:42em){.sg-nav-toggle{display:none}}@media all and (max-width:42em){.sg-nav-container{overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.sg-nav-container.active{max-height:50em}}.sg-nav{z-index:1;margin:0;padding:0;list-style:none}.sg-nav>li{cursor:pointer}.sg-nav~li .sg-acc-handle.active{border:1px solid #d9d9d9}@media all and (min-width:42em){.sg-nav>li{border-bottom:0;float:left;position:relative}.sg-nav>li>ol{position:absolute;left:0;margin-top:1px}}.sg-nav a{display:block}.sg-acc-handle{position:relative}@media all and (min-width:42em){.sg-acc-handle:after{float:none}}.sg-acc-handle.active{color:#006192;background:#fff;margin-top:-1px}@media all and (max-width:42em){.sg-acc-handle.sg-tools-toggle{margin-top:0}}.sg-acc-handle:after{display:block;content:attr(aria-label);font-weight:700;height:0;overflow:hidden;visibility:hidden}.sg-acc-panel{overflow:hidden;max-height:0;margin:0;padding:0;list-style:none;min-width:25em}.sg-acc-panel li{background:rgba(255,255,255,.9);color:#414141;border:1px solid #d9d9d9;border-top-width:0;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.sg-acc-panel li:first-child{border-top:0}.sg-acc-panel a{display:block}.sg-acc-panel.active{max-height:120em;overflow:auto;margin-top:2px}.sg-acc-panel.sg-right{position:absolute;left:auto;right:0;top:49px}.sg-sub-nav{list-style:none}.sg-sub-nav li{border-left-width:0;border-right-width:0;border-bottom-width:0}.sg-sub-nav a{text-transform:none;padding-left:1rem}.sg-sub-nav.active li{background:#f5f5f5}.sg-controls{border:0;position:absolute;right:0;z-index:2}@media all and (max-width:42em){.sg-controls{top:50px}}.sg-control>li{float:left}.sg-size{width:135px;display:none}@media all and (min-width:42em){.sg-size{width:auto;display:block}}.sg-current-size{font-size:13px;padding:1em .7em}@media all and (min-width:53em){.sg-current-size{float:left}}#sg-form{margin:0;border:0;padding:0}.sg-input{margin:-2px 2px 0 0;padding:.1em;border:0;font-size:16px;background-color:transparent;color:inherit;width:25px;text-align:right;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.sg-input:hover{color:#000;background:#fff}.sg-input:active,.sg-input:focus{outline:0;color:#000;background:#fff}@media all and (min-width:42em){.sg-input{width:35px}.sg-input.sg-size-px{width:45px}.sg-input.sg-size-em{width:55px}}.sg-size-options{display:none}.sg-size-options a{display:block}@media all and (min-width:53em){.sg-size-options{display:block;float:left;position:static}.sg-size-options>li{float:left}}.sg-tools-toggle{font-size:13px;color:#414141;text-decoration:none;line-height:1;border:0;cursor:pointer;padding:1em .7em .6em;background:#fff}.sg-tools-toggle:hover{color:#006192}.sg-find{position:relative}.twitter-typeahead{width:100%}.typeahead{border:0;background:#222;color:grey;width:100%;right:0;padding:.8em;text-transform:lowercase}.typeahead:focus{background:grey;color:#fff}.tt-input{background:grey;color:#fff;text-transform:initial;font-size:16px;font-family:'Allianz Neo'}.tt-hint{height:46px}.tt-dropdown-menu{text-transform:lowercase;background-color:grey;width:100%;margin-top:-1px}.tt-suggestion{color:#eee;padding:.8em;cursor:pointer}.tt-suggestion.tt-cursor{color:#fff;background:rgba(255,255,255,.25)}.tt-suggestion p{margin:0}.sg-pattern-state{text-transform:none!important}.sg-pattern-state:before{content:"\2022";margin-right:4px;font-size:18px;vertical-align:bottom;display:inline-block;text-decoration:none}.sg-pattern-lineage .sg-pattern-state:before{font-size:12px}#sg-patterns .sg-pattern-state:before{font-size:14px}#sg-patterns .sg-pattern-state{color:#666}.sg-nav .sg-pattern-state:before{margin-top:-4px;margin-bottom:0;margin-left:-4px;height:20px;display:block;float:left}.inprogress:before{color:#ff4136!important}.inreview:before{color:#fc0!important}.complete:before{color:#2ecc40!important}#sg-vp-wrap{text-align:center;width:100%;position:fixed;top:99px;bottom:0;left:0;right:0;z-index:0;background:#333}#sg-cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:col-resize}#sg-gen-container{height:100%;position:relative;text-align:center;margin:0 auto;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden}#sg-gen-container.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}#sg-viewport{position:absolute;height:100%;width:100%;border:0;padding:0;margin:0;top:0;bottom:0;left:0;right:0;background-color:#fff}#sg-viewport.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}#sg-rightpull-container{width:14px;float:right;margin:0;height:100%;cursor:col-resize}#sg-rightpull{margin:0;width:100%;height:100%;background:#c2c2c2;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}#sg-rightpull:hover{background:grey}#sg-rightpull:active{cursor:col-resize;background:#666}.vp-animate{-webkit-transition:width .8s ease-out;transition:width .8s ease-out}.sg-pattern{margin-bottom:2em;position:relative;clear:both}.sg-pattern-head{position:relative;padding:.5rem 0 0;line-height:1.3;font-size:90%;color:grey}.sg-pattern-head:empty{padding:0}.sg-pattern-title{font-size:.85rem;line-height:1;font-weight:700;margin:0;padding:0;text-transform:capitalize}.sg-pattern-title a{display:inline-block;padding:.8em 0 .3rem;color:grey;text-decoration:none;cursor:pointer;font-weight:700}.sg-pattern-title a:focus,.sg-pattern-title a:hover{color:#000}.sg-pattern-title .sg-pattern-state{font-size:80%;font-weight:400;color:#ccc}.sg-pattern-extra-toggle{font-size:9px;position:absolute;bottom:-1px;right:0;z-index:1;padding:.65em;line-height:1;color:grey;font-weight:400;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}.sg-pattern-extra-toggle span{display:inline-block}.sg-pattern-extra-toggle.active,.sg-pattern-extra-toggle:focus,.sg-pattern-extra-toggle:hover{background:#eee;color:#000}.sg-pattern-extra-toggle.active{border-bottom-color:#eee}.sg-pattern-extra-toggle.active span{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sg-pattern-extra{background:#eee;border-top:1px solid #ddd;margin-bottom:1em;overflow:hidden;max-height:1px;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.sg-pattern-extra a{text-decoration:underline;color:#222}.sg-pattern-extra a:focus,.sg-pattern-extra a:hover{color:grey}.sg-pattern-extra.active{border:1px solid #ddd;border-radius:6px;border-top-right-radius:0;max-height:50em}@media all and (min-width:42em){.sg-pattern-extra-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}}.sg-pattern-extra-info{padding:.5rem .5rem 0;line-height:1.4;font-size:90%;color:grey;overflow:auto;-webkit-overflow-scrolling:touch}.sg-pattern-extra-info:empty{padding:0}@media all and (min-width:42em){.sg-pattern-extra-info{padding:1em;width:40%}}.sg-pattern-desc{margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid #ccc}.sg-pattern-desc p:last-child{margin:0}.sg-pattern-lineage{font-size:90%;font-style:italic}.sg-pattern-extra-code{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-size:90%;padding:.5rem;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.sg-pattern-extra-code pre{overflow:scroll!important;-webkit-overflow-scrolling:touch;padding:0 .5rem .5rem!important;margin:0!important;line-height:1!important;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;border-radius:0 6px 6px 6px!important;position:absolute;top:0;bottom:0;left:0;right:0}.sg-pattern-extra-code code{display:block;-moz-tab-size:2!important;-o-tab-size:2!important;tab-size:2!important}@media all and (min-width:42em){.sg-pattern-extra-code{width:60%;padding:1em}}.sg-pattern-category{margin-top:6rem;font:"'Roboto', sans-serif"!important}.sg-pattern-category:first-of-type{margin-top:2rem}.sg-pattern-category-title{font-size:1.4rem;color:#222;margin:0 0 .2rem;text-transform:capitalize}.sg-pattern-category-title a{-webkit-transition:color .1s ease-out;transition:color .1s ease-out}.sg-pattern-category-body{font-size:80%;line-height:1.3}.sg-pattern-category-body:empty{display:none}.language-markup code[class*=language-],.language-markup pre[class*=language-]{white-space:pre-wrap}@media all and (min-width:42em){.language-markup code[class*=language-],.language-markup pre[class*=language-]{white-space:pre}}.sg-tabs{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font:"'Roboto', sans-serif"!important}.sg-tabs-list{overflow:hidden;position:relative;bottom:-1px;list-style:none;margin:0;padding:0}.sg-tabs-list li{float:left;margin-right:3px}.sg-tabs-list a{display:block;font-size:90%;font-weight:700;line-height:1;padding:.5em 1em;background:#eee;border:1px solid #ccc;border-bottom:0;color:grey;border-top-right-radius:6px;border-top-left-radius:6px;text-decoration:none;text-transform:capitalize}.sg-tabs-list a:hover{color:#222}.sg-tab-title-active a{background:#f5f2f0;color:#222}.sg-tab-title-active a:focus,.sg-tab-title-active a:hover{color:#222}.sg-tabs-content{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border:1px solid #ccc;border-radius:0 6px 6px 6px;overflow:hidden}.sg-tabs-panel{display:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;min-height:12em}@media all and (min-width:42em){.sg-tabs-panel{min-height:7em}}.sg-modal{line-height:1.4;font-size:90%;background:#000;color:#ccc;position:fixed;top:auto;bottom:0;left:0;z-index:2;width:100%;height:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.sg-modal.anim-ready{-webkit-transition:bottom .3s ease-out;transition:bottom .3s ease-out}.sg-modal .sg-pattern-breadcrumb{font-size:13px;color:grey;margin-bottom:.5rem}.sg-modal .sg-pattern-head{margin-bottom:.5rem}.sg-modal .sg-pattern-title{font-size:1.4rem!important;color:#eee}.sg-modal .sg-pattern-extra{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;max-height:none;padding:0}.sg-modal .sg-pattern-extra.active{max-height:none}.sg-modal .sg-pattern-extra-info a{color:#ccc}.sg-modal .sg-pattern-extra-info a:focus,.sg-modal .sg-pattern-extra-info a:hover{color:#eee}.sg-modal .sg-pattern-desc{border-bottom-color:grey}.sg-modal .sg-annotations{border-top-color:grey}.sg-modal .sg-tabs-content{border:0}.sg-modal-close-btn{font-size:70%;background:#000;color:grey;border:0;border-radius:6px 6px 0 0;display:inline-block;padding:.9em .7em .1em;text-transform:uppercase;text-decoration:none;cursor:pointer;position:absolute;right:0;top:1rem;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.sg-modal.active .sg-modal-close-btn{top:-1.5rem}.sg-modal-close-btn:focus,.sg-modal-close-btn:hover{background:#222;color:#eee}.sg-modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;overflow-x:hidden}.sg-modal-content-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.has-annotation{cursor:help!important;-webkit-box-shadow:0 0 10px grey;box-shadow:0 0 10px grey}.has-annotation a,.has-annotation input{cursor:help!important}.has-annotation:hover{-webkit-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000}.has-annotation.active{-webkit-box-shadow:inset 0 0 20px grey;box-shadow:inset 0 0 20px grey}.annotation-tip{display:block;position:absolute;margin-top:-10px!important;margin-left:-10px!important;width:25px!important;height:25px!important;border-radius:13px!important;text-align:center!important;background:#444!important;color:#fff!important;font-weight:700!important;font-size:16px!important;z-index:100}.sg-annotations{margin:1rem 0;border-top:1px solid #ddd;padding-top:.5rem}.sg-annotations-title{font-size:1rem!important;margin:0 0 .5rem}.sg-annotations-list{padding:0;margin:0;list-style:none;counter-reset:the-count}.sg-annotations-list>li{position:relative;padding-left:1.5rem;margin-bottom:1rem;border-radius:6px;-webkit-transition:background .1s ease;transition:background .1s ease}.sg-annotations-list>li:before{content:counter(the-count);counter-increment:the-count;font-size:85%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:14px;height:14px;border-radius:50%;padding:2px;text-align:center;background:#ccc;color:#222;position:absolute;top:1px;left:0}.sg-annotations-list>li.active{background:rgba(255,255,255,.15)}.sg-annotations-list-title{display:inline;font-size:16px}.sg-annotations-list-title:after{content:"—"}#sg-comments-container{max-width:60em;margin:0 auto}.sg-comment-container{padding-bottom:2em;margin-bottom:1em;border-bottom:1px solid rgba(255,255,255,.25)}.sg-comment-container p:last-child{margin-bottom:0}.sg-comment-container h2{margin-bottom:.25em}