.sg-rtl-only{display:none}[dir=rtl] .sg-rtl-only{display:block}
@keyframes sg-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes sg-pulse{0%{background:#eee}100%{background:#ccc}}@keyframes sg-wink{0%{box-shadow:0 0 0 5px rgba(204,204,204,.2)}100%{box-shadow:0 0 0 5px rgba(251,52,73,.7)}}.sg-tab-panel__nav-tabs{max-width:100%;padding:1px 0 0 0;margin:0;border:0;margin:0 -1px 0 0}.sg-tab-panel__nav-tabs[dir=rtl]{margin:0 0 0 -1px}.sg-tab-panel__nav-item.sg-tab-panel__nav-item{position:relative;width:100%;margin:0 1px 0 0}@media only screen and (min-width: 576px){.sg-tab-panel__nav-item.sg-tab-panel__nav-item{flex-basis:0;flex-grow:1;max-width:100%}}@media only screen and (min-width: 768px){.sg-tab-panel__nav-item.sg-tab-panel__nav-item{width:auto;flex-basis:auto;flex-grow:0}}.sg-tab-panel__nav-item.sg-tab-panel__nav-item[dir=rtl]{margin:0 0 0 1px}.sg-tab-panel__nav-link.sg-tab-panel__nav-link{font-size:80%;padding:8px 20px;text-decoration:none;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:1px}.sg-tab-panel__nav-link.sg-tab-panel__nav-link,.sg-tab-panel__nav-link.sg-tab-panel__nav-link:hover,.sg-tab-panel__nav-link.sg-tab-panel__nav-link.active{border-color:transparent}.sg-tab-panel__nav-link.sg-tab-panel__nav-link,.sg-tab-panel__nav-link.sg-tab-panel__nav-link.disabled{background-color:#a2a2a2}.sg-tab-panel__nav-link.sg-tab-panel__nav-link.disabled{color:rgba(255,255,255,.4)}.sg-tab-panel__nav-link.sg-tab-panel__nav-link.active{position:relative;z-index:10}html .sg-tab-panel__nav-link.sg-tab-panel__nav-link.active{background-color:#eee;border-top-color:#eee;color:#a2a2a2}.sg-tab-panel__pane{padding:30px;background:#fff}
@keyframes sg-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes sg-pulse{0%{background:#eee}100%{background:#ccc}}@keyframes sg-wink{0%{box-shadow:0 0 0 5px rgba(204,204,204,.2)}100%{box-shadow:0 0 0 5px rgba(251,52,73,.7)}}.sg-layout{position:relative;height:100vh;height:calc(var(--vh, 1vh) * 100);overflow:hidden}.sg-layout__master{background:#eee;width:335px;height:100%;margin-left:0;margin-right:auto;direction:ltr;text-align:left}.sg-layout__detail{background:#fff;box-shadow:0 0 2px rgba(0,0,0,.2);position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;transition:transform .4s}#sg:target .sg-layout__detail{transform:translateX(335px);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#sg:target .sg-layout__detail::before{content:"";display:block;position:absolute;width:100%;height:100%;background:rgba(255,255,255,.8);z-index:9990;animation:sg-fade-in .4s}.sg-layout__triggers{position:absolute;z-index:9999;left:3px;bottom:3px;direction:ltr;text-align:left}[dir=rtl] .sg-layout__triggers{left:3.1px}.sg-layout__triggers,.sg-layout__trigger-group{display:flex}.sg-layout__trigger-group--menu{display:none}#sg:target .sg-layout__trigger-group--menu{display:flex;opacity:0;animation:sg-fade-in .4s .4s forwards}.sg-layout__overlay{position:absolute;top:5px;left:340px;right:5px;bottom:5px;z-index:0;opacity:0;transition:opacity .4s}@media(min-width: 735px){#sg:target .sg-layout__overlay{z-index:9999;transition-delay:.4s;opacity:1}}
@keyframes sg-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes sg-pulse{0%{background:#eee}100%{background:#ccc}}@keyframes sg-wink{0%{box-shadow:0 0 0 5px rgba(204,204,204,.2)}100%{box-shadow:0 0 0 5px rgba(251,52,73,.7)}}.sg-button{border:0;display:block;height:40px;width:40px;border-radius:50%;overflow:hidden;position:relative;box-shadow:0 0 0 5px rgba(204,204,204,.2);transition:background .3s,box-shadow .3s;margin:7px;text-indent:-999em;outline:0 !important}.sg-button:hover{animation:none !important;background-color:#f8f6f6 !important}#sg:target .sg-button{background-color:#f8f6f6;box-shadow:0 0 0 5px #e7e7e7}#sg:target .sg-button:hover{background-color:#fff !important}.sg-button-menu{transition:background .3s,box-shadow .3s,transform .4s;animation:sg-wink .6s 10 alternate linear}body.index .sg-button-menu{animation:sg-wink .6s infinite alternate ease-in-out}#sg:target .sg-button-menu{animation:none;transform:rotate(-90deg)}.sg-button-menu__hitarea{display:block;position:absolute;width:100%;height:100%;z-index:10;overflow:hidden;text-indent:-999em}.sg-button-menu__hitarea--hide{display:none}#sg:target .sg-button-menu__hitarea--hide{display:block}.sg-button-menu__kebab{position:relative;top:50%;left:50%;margin-top:-3px;margin-left:-3px;z-index:5}.sg-button-menu__kebab,.sg-button-menu__kebab:before,.sg-button-menu__kebab:after{display:block;height:6px;width:6px;background:#868685;border-radius:3px}.sg-button-menu__kebab:before,.sg-button-menu__kebab:after{content:"";position:absolute;width:100%}.sg-button-menu__kebab:before{top:-8px}.sg-button-menu__kebab:after{bottom:-8px}.sg-button-standalone{background-position:center;background-repeat:no-repeat;background-size:16px 16px;background-image:url("data:image/svg+xml,%3Csvg version='1.1' baseProfile='basic' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='0 0 23 22' xml:space='preserve' class='vi-icon' fill='none' stroke='%23868685' stroke-width='2'%3E%3Cstyle fill='none' stroke='%23868685' stroke-width='2'%3E.st0%7Bclip-path:url(%23SVGID_2_);fill:none;stroke:%23269e75;stroke-width:1.2;stroke-miterlimit:10%7D%3C/style%3E%3Cdefs fill='none' stroke='%23868685' stroke-width='2'%3E%3Cpath id='SVGID_1_' d='M0 0h23v22H0z' fill='none' stroke='%23868685' stroke-width='2' /%3E%3C/defs%3E%3CclipPath id='SVGID_2_' fill='none' stroke='%23868685' stroke-width='2'%3E%3Cuse xlink:href='%23SVGID_1_' overflow='visible' fill='none' stroke='%23868685' stroke-width='2' /%3E%3C/clipPath%3E%3Cpath d='M21.2 1L8.5 12.5M9.9 1H1v20h20v-9M15 1h6v6' fill='none' stroke='%23868685' stroke-width='2' /%3E%3C/svg%3E")}.sg-button-direction{background-position:center;background-repeat:no-repeat;background-size:24px 24px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='vi-icon' fill='%23A2A2A2' stroke='none'%3E%3Cpath d='M10 10v5h2V4h2v11h2V4h2V2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4zm-2 7v-3l-4 4 4 4v-3h12v-2H8z' fill='%23A2A2A2' stroke='none' /%3E%3C/svg%3E")}.sg-button-direction.rtl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='vi-icon' fill='%23A2A2A2' stroke='none'%3E%3Cpath d='M9 10v5h2V4h2v11h2V4h2V2H9C6.79 2 5 3.79 5 6s1.79 4 4 4zm12 8l-4-4v3H5v2h12v3l4-4z' fill='%23A2A2A2' stroke='none' /%3E%3C/svg%3E")}
@keyframes sg-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes sg-pulse{0%{background:#eee}100%{background:#ccc}}@keyframes sg-wink{0%{box-shadow:0 0 0 5px rgba(204,204,204,.2)}100%{box-shadow:0 0 0 5px rgba(251,52,73,.7)}}
@keyframes sg-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes sg-pulse{0%{background:#eee}100%{background:#ccc}}@keyframes sg-wink{0%{box-shadow:0 0 0 5px rgba(204,204,204,.2)}100%{box-shadow:0 0 0 5px rgba(251,52,73,.7)}}.sg-dropdown{margin-bottom:10px;position:relative;direction:ltr;text-align:left}.sg-dropdown__label{animation:sg-context 1.8s;display:block;height:36px;line-height:28px;overflow:hidden;border-radius:3px;padding:6px 8px;cursor:pointer;color:#fff;background:#ccc url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 8px center;background-size:8px 10px;transition:background-color .3s}.sg-dropdown__label:hover{background-color:#868685}.sg-dropdown__list{list-style:none;padding:10px 5px;margin:0;position:absolute;z-index:5;top:-10px;left:-5px;right:-5px;border-radius:3px;background:#fff;box-shadow:0 0 3px rgba(0,0,0,.2);display:none}.sg-dropdown.on .sg-dropdown__list{display:block;animation:sg-context .5s}.sg-dropdown__separator{height:1px;margin:10px 0;background:rgba(0,0,0,.1)}.sg-dropdown__trigger{display:block;height:36px;padding:6px 8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;background:transparent;width:100%;text-align:left;outline:0 !important}.sg-dropdown__trigger[href]{color:#00567a;text-decoration:none}.sg-dropdown__trigger:hover{background:#eee}
@keyframes sg-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes sg-pulse{0%{background:#eee}100%{background:#ccc}}@keyframes sg-wink{0%{box-shadow:0 0 0 5px rgba(204,204,204,.2)}100%{box-shadow:0 0 0 5px rgba(251,52,73,.7)}}
@keyframes sg-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes sg-pulse{0%{background:#eee}100%{background:#ccc}}@keyframes sg-wink{0%{box-shadow:0 0 0 5px rgba(204,204,204,.2)}100%{box-shadow:0 0 0 5px rgba(251,52,73,.7)}}.sg-backgroundx{position:relative;padding:15px;margin:20px -15px}.sg-backgroundx--bg-1{background-color:rgba(0,0,0,.1)}.sg-backgroundx--bg-2{background-color:rgba(0,0,0,.15)}.sg-backgroundx--bg-3{background-color:rgba(0,0,0,.2)}.sg-backgroundx::after{content:"background for contrast";position:absolute;top:0;right:-5px;line-height:14px;font-size:10px;padding-top:2px;padding-left:5px;padding-right:5px;color:#a2a2a2;text-transform:uppercase;pointer-events:none;z-index:1;background:#fff;opacity:1;transition:opacity .3s}.sg-backgroundx:first-child{margin-top:-15px}.sg-backgroundx:first-child::after{top:-5px}.sg-backgroundx:last-child{margin-bottom:-15px}
@keyframes sg-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes sg-pulse{0%{background:#eee}100%{background:#ccc}}@keyframes sg-wink{0%{box-shadow:0 0 0 5px rgba(204,204,204,.2)}100%{box-shadow:0 0 0 5px rgba(251,52,73,.7)}}.sg-icon{display:inline-block;overflow:hidden;fill:currentColor;flex-shrink:0}
@keyframes sg-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes sg-pulse{0%{background:#eee}100%{background:#ccc}}@keyframes sg-wink{0%{box-shadow:0 0 0 5px rgba(204,204,204,.2)}100%{box-shadow:0 0 0 5px rgba(251,52,73,.7)}}.sg-example{margin-bottom:30px}.sg-example--detached{margin-bottom:0}.sg-example__main{display:flex;flex-direction:column}.sg-example__controls{direction:ltr;order:2;background:#eee;border:3px solid #eee;display:flex}.sg-example__controls--tabs{order:0}.sg-example__canvas{order:1;position:relative;background-color:#fff;transition:background-color .3s,box-shadow .3s}.sg-example__canvas::before,.sg-example__canvas::after{position:absolute;top:0;line-height:14px;font-size:10px;padding-top:2px;padding-left:5px;padding-right:5px;color:#a2a2a2;text-transform:uppercase;pointer-events:none;z-index:1;background:#fff;opacity:1;transition:opacity .3s}.sg-example__canvas::before{content:"example";left:0}.sg-example__canvas::after{right:0;content:"background for contrast"}.sg-example__canvas[dir=ltr]::before{direction:ltr;content:"dir (→)"}.sg-example__canvas[dir=rtl]::before{direction:ltr;content:"dir (←)"}.sg-example__canvas--default,.sg-example__canvas--detached,.sg-example__canvas--tabs{padding:20px;border:solid #eee;border-width:0 3px 3px;box-shadow:0 0 0 5px #fff inset}.sg-example__canvas--default,.sg-example__canvas--detached{border-width:3px 3px 0}.sg-example__canvas--tabs{display:none}.sg-example__canvas--tabs.active{display:block}.sg-example__canvas--tabs::before{content:none}.sg-example__canvas--tabs::before,.sg-example__canvas--tabs::after{top:auto;bottom:0}.sg-example__canvas--plain{padding:20px 0}.sg-example__canvas--plain[class*="--bg-default"]{box-shadow:0 1px 0 0 rgba(0,0,0,.05),0 -1px 0 0 rgba(0,0,0,.05)}.sg-example__canvas--bg-default{background-color:#fff}.sg-example__canvas--bg-default::after{opacity:0}.sg-example__canvas--bg-light{background-color:#ccc}.sg-example__canvas--bg-lighter{background-color:#e1e1e1}.sg-example__canvas--bg-blocked{background-color:#fff;background-image:linear-gradient(45deg, #e1e1e1 25%, transparent 25%),linear-gradient(135deg, #e1e1e1 25%, transparent 25%),linear-gradient(45deg, transparent 75%, #e1e1e1 75%),linear-gradient(135deg, transparent 75%, #e1e1e1 75%);background-size:20px 20px;background-position:0 0,10px 0,10px -10px,0px 10px}.sg-example__source{order:3;direction:ltr;border:solid #eee;padding:20px;border-width:0 3px 3px;position:relative}.sg-example__source::before{position:absolute;top:0;line-height:14px;font-size:10px;padding-top:2px;padding-left:5px;padding-right:5px;color:#a2a2a2;text-transform:uppercase;pointer-events:none;z-index:1;background:#fff;opacity:1;transition:opacity .3s;content:"source";left:0}.sg-example__source--tabs,.sg-example__source--plain-collapsed{display:none}.sg-example__source--tabs.active,.sg-example__source--plain-collapsed.active{display:block}.sg-example__source--tabs::before,.sg-example__source--plain-collapsed::before{content:none}#sg .sg-example__source-pre{font-size:inherit;margin:0;border:0;padding:0;background:transparent}.sg-example__btn{background:#eee;border:0;padding:5px 10px;font-size:10px;line-height:20px;font-weight:normal;text-transform:uppercase;letter-spacing:1px;transition:background-color .3s}.sg-example__btn:focus{outline:0}.sg-example__btn:hover{background-color:#d5d5d5}.sg-example__btn:active,.sg-example__btn.active{background-color:#fff}.sg-example__btn--direction,.sg-example__btn--background,.sg-example__btn--clipboard{width:30px;height:30px;position:relative;border-radius:2px}.sg-example__btn--direction::before,.sg-example__btn--direction::after,.sg-example__btn--background::before,.sg-example__btn--background::after,.sg-example__btn--clipboard::before,.sg-example__btn--clipboard::after{position:absolute;display:block;top:0;left:0;right:0;bottom:0;content:"";background:no-repeat center;background-size:24px 24px;opacity:1;transition:opacity .3s}.sg-example__btn--direction::after,.sg-example__btn--background::after,.sg-example__btn--clipboard::after{opacity:0}.sg-example__btn--direction:hover::before,.sg-example__btn--background:hover::before,.sg-example__btn--clipboard:hover::before{opacity:0}.sg-example__btn--direction:hover::after,.sg-example__btn--background:hover::after,.sg-example__btn--clipboard:hover::after{opacity:1}.sg-example__btn--direction span,.sg-example__btn--background span,.sg-example__btn--clipboard span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.sg-example__btn--direction{margin-left:auto}.sg-example__btn--direction::before{background-position:bottom 1px left 3px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='vi-icon' fill='%23a2a2a2' stroke='none'%3E%3Cpath d='M10 10v5h2V4h2v11h2V4h2V2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4zm-2 7v-3l-4 4 4 4v-3h12v-2H8z' fill='%23a2a2a2' stroke='none' /%3E%3C/svg%3E")}.sg-example__btn--direction::after{background-position:bottom 1px left 3px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='vi-icon' fill='%233c3c3c' stroke='none'%3E%3Cpath d='M10 10v5h2V4h2v11h2V4h2V2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4zm-2 7v-3l-4 4 4 4v-3h12v-2H8z' fill='%233c3c3c' stroke='none' /%3E%3C/svg%3E")}.sg-example__btn--direction.rtl::before{background-position:bottom 1px left 4px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='vi-icon' fill='%23a2a2a2' stroke='none'%3E%3Cpath d='M9 10v5h2V4h2v11h2V4h2V2H9C6.79 2 5 3.79 5 6s1.79 4 4 4zm12 8l-4-4v3H5v2h12v3l4-4z' fill='%23a2a2a2' stroke='none' /%3E%3C/svg%3E")}.sg-example__btn--direction.rtl::after{background-position:bottom 1px left 4px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='vi-icon' fill='%233c3c3c' stroke='none'%3E%3Cpath d='M9 10v5h2V4h2v11h2V4h2V2H9C6.79 2 5 3.79 5 6s1.79 4 4 4zm12 8l-4-4v3H5v2h12v3l4-4z' fill='%233c3c3c' stroke='none' /%3E%3C/svg%3E")}.sg-example__btn--background::before{background-size:22px 22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='vi-icon' fill='%23a2a2a2' stroke='none'%3E%3Cpath d='M17.66 7.93L12 2.27 6.34 7.93c-3.12 3.12-3.12 8.19 0 11.31A7.98 7.98 0 0012 21.58c2.05 0 4.1-.78 5.66-2.34 3.12-3.12 3.12-8.19 0-11.31zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z' fill='%23a2a2a2' stroke='none' /%3E%3C/svg%3E")}.sg-example__btn--background::after{background-size:22px 22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='vi-icon' fill='%233c3c3c' stroke='none'%3E%3Cpath d='M17.66 7.93L12 2.27 6.34 7.93c-3.12 3.12-3.12 8.19 0 11.31A7.98 7.98 0 0012 21.58c2.05 0 4.1-.78 5.66-2.34 3.12-3.12 3.12-8.19 0-11.31zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z' fill='%233c3c3c' stroke='none' /%3E%3C/svg%3E")}.sg-example__btn--clipboard::before{background-size:20px 20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='vi-icon' fill='%23a2a2a2' stroke='none'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z' fill='%23a2a2a2' stroke='none' /%3E%3C/svg%3E")}.sg-example__btn--clipboard::after{background-size:20px 20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='vi-icon' fill='%233c3c3c' stroke='none'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z' fill='%233c3c3c' stroke='none' /%3E%3C/svg%3E")}.sg-example__btn--default-canvas,.sg-example__btn--default-source,.sg-example__btn--plain-canvas,.sg-example__btn--plain-source,.sg-example__btn--plain-collapsed-canvas{display:none}.sg-example__btn--tabs-canvas+.sg-example__btn--tabs-source{margin-left:3px}.sg-example__btn--tabs-canvas.active,.sg-example__btn--tabs-source.active,.sg-example__btn--plain-collapsed-source.active{box-shadow:0 3px 0 0 #fff}.sg-example__btn--tabs-source.active~.sg-example__btn--background,.sg-example__btn--tabs-source.active~.sg-example__btn--direction{display:none}.sg-example__btn--tabs-source.active~.sg-example__btn--clipboard{margin-left:auto}