altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
1 lines • 31.8 kB
CSS
*{-webkit-box-sizing:border-box;box-sizing:border-box}.is-vishidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)}#patternlab-body,#patternlab-html{margin:0;padding:0;-webkit-text-size-adjust:100%}.sg-header{color:#FFF;text-transform:uppercase;position:fixed;top:0;left:0;z-index:4}.sg-header ul{padding:0;margin:0;list-style:none}.sg-header a{text-decoration:none;-webkit-transition:color .1s ease-out;transition:color .1s ease-out}.sg-nav-toggle{display:inline-block;position:relative;text-transform:uppercase;z-index:2}@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}@media all and (min-width:42em){.sg-nav>li{border-bottom:0;float:left;position:relative}.sg-nav>li>ol{position:absolute;top:2em;left:0}}.sg-nav a{display:block}.sg-acc-handle:after{display:inline-block;font-size:7px;position:relative;top:-1px;right:-2px;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}@media all and (min-width:42em){.sg-acc-handle:after{float:none}}.sg-acc-handle.active{color:#FFF;background:#222}.sg-acc-handle.active:after{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sg-acc-panel{overflow:hidden;max-height:0;margin:0;padding:0;list-style:none;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.sg-acc-panel li:last-child,.sg-acc-panel li:last-child a{border-bottom-left-radius:6px;border-bottom-right-radius:6px}.sg-acc-panel a{display:block}.sg-acc-panel.active{max-height:120em;overflow:auto}.sg-acc-panel.sg-right{position:absolute;left:auto;right:0}.sg-sub-nav{list-style:none}.sg-sub-nav a{text-transform:none;padding-left:1rem}.sg-controls{border:0;position:absolute;right:0;z-index:2}.sg-control>li{float:left}.sg-size{width:135px}@media all and (min-width:42em){.sg-size{width:auto}}@media all and (min-width:53em){.sg-current-size{float:left}}#sg-form{margin:0;border:0;padding:0}.sg-input{margin:-2px 0 0;padding:.1em;border:0;border-radius:3px;background:#000;width:25px;text-align:right;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.sg-input:hover{color:#FFF;background:#222}.sg-input:active,.sg-input:focus{outline:0;background:grey;color:#FFF}@media all and (min-width:42em){.sg-input{width:35px}.sg-input.sg-size-px{width:30px}}.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:70%;color:grey;text-decoration:none;line-height:1;border:0;cursor:pointer}.sg-tools-toggle:after{display:none;content:""}.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}.tt-input{background:grey;color:#FFF;text-transform:uppercase}.tt-input:focus{text-transform:lowercase}.tt-hint{text-transform:lowercase;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.tt-dropdown-menu{text-transform:lowercase;background-color:grey;width:100%;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.tt-suggestion{color:#EEE;font-size:75%;padding:.8em}.tt-suggestion.tt-cursor{color:#FFF;background:rgba(255,255,255,.25)}.tt-suggestion p{margin:0}.sg-pattern-state{text-transform:none}.sg-pattern-state:before{content:"\2022";margin-right:4px;display:inline-block;text-decoration:none}#sg-patterns .sg-pattern-state:before{font-size:14px}#sg-patterns .sg-pattern-state{color:#666}.sg-nav .sg-pattern-state:before{margin-bottom:0;margin-left:-4px;height:20px;display:block;float:left}.inprogress:before{color:#FF4136}.inreview:before{color:#FC0}.complete:before{color:#2ECC40}#sg-vp-wrap{text-align:center;width:100%;position:fixed;bottom:0;left:0;right:0;z-index:0}#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{position:relative;clear:both}.sg-pattern-head{position:relative;line-height:1.3;font-size:90%;color:grey}.sg-pattern-head:empty{padding:0}.sg-pattern-title{font-family:HelveticaNeue,Helvetica,Arial,sans-serif;font-size:.85rem;line-height:1;font-weight:700;margin:0;padding:0;text-transform:capitalize}.sg-pattern-title a{display:inline-block;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{position:absolute;bottom:-1px;right:0;z-index:1;padding:.65em;line-height:1;color:grey;font-weight:400;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{color:#000}.sg-pattern-extra-toggle.active span{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sg-pattern-extra{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:focus,.sg-pattern-extra a:hover{color:grey}.sg-pattern-extra.active{border:1px solid #DDD;border-radius:6px 0 6px 6px;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}.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%;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.sg-pattern-extra-code pre{overflow:scroll;-webkit-overflow-scrolling:touch;padding:0 .5rem .5rem;margin:0;line-height:1;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;border-radius:0 6px 6px;position:absolute;top:0;bottom:0;left:0;right:0}.sg-pattern-extra-code code{display:block;-moz-tab-size:2;-o-tab-size:2;tab-size:2}@media all and (min-width:42em){.sg-pattern-extra-code{width:60%;padding:1em}}.sg-pattern-category{font:HelveticaNeue,Helvetica,Arial,sans-serif}.sg-pattern-category:first-of-type{margin-top:2rem}.sg-pattern-category-title{font-size:1.4rem;color:#222;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:HelveticaNeue,Helvetica,Arial,sans-serif}.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;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{font-family:HelveticaNeue,Helvetica,Arial,sans-serif;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:70%;color:grey;margin-bottom:.5rem}.sg-modal .sg-pattern-head{margin-bottom:.5rem}.sg-modal .sg-pattern-title{font-size:1.4rem;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,.has-annotation a,.has-annotation input{cursor:help}.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;margin-left:-10px;width:25px;height:25px;border-radius:13px;text-align:center;background:#444;color:#fff;font-weight:700;font-size:16px;z-index:100}.sg-annotations{margin:1rem 0;border-top:1px solid #DDD}.sg-annotations-title{font-size:1rem;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:100%}.sg-annotations-list-title:after{content:"\2014"}#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}@font-face{font-family:DIN-light;src:url(https://tt02.altinn.no/ui/fonts/DINWeb-Light.woff)}@font-face{font-family:DIN-reg;src:url(https://tt02.altinn.no/ui/fonts/DINWeb.woff)}@font-face{font-family:DIN-medium;src:url(https://tt02.altinn.no/ui/fonts/DINWeb-Medium.woff)}@font-face{font-family:DIN-bold;src:url(https://tt02.altinn.no/ui/fonts/DINWeb-Bold.woff)}.popover,button,input,optgroup,select,textarea{font-family:DIN-reg;font-weight:400}.a-fontSizeXXL{font-size:24px;font-size:2.4rem;line-height:1.5;-webkit-font-smoothing:subpixel-antialiased}@media (min-width:768px){.a-fontSizeXXL{font-size:28px;font-size:2.8rem;line-height:1.4;-webkit-font-smoothing:subpixel-antialiased}}@media (min-width:992px){.a-fontSizeXXL{font-size:36px;font-size:3.6rem;line-height:1.2;-webkit-font-smoothing:subpixel-antialiased}}.a-fontSizeL,.a-fontSizeXL{font-size:18px;font-size:1.8rem;line-height:1.5;-webkit-font-smoothing:subpixel-antialiased}@media (min-width:768px){.a-fontSizeXL{font-size:22px;font-size:2.2rem;line-height:1.5;-webkit-font-smoothing:subpixel-antialiased}}@media (min-width:992px){.a-fontSizeXL{font-size:24px;font-size:2.4rem;line-height:1.5;-webkit-font-smoothing:subpixel-antialiased}}@media (min-width:1200px){.a-fontSizeXL{font-size:28px;font-size:2.8rem;line-height:1.4;-webkit-font-smoothing:subpixel-antialiased}}@media (min-width:768px){.a-fontSizeL{font-size:20px;font-size:2rem;line-height:1.5;-webkit-font-smoothing:subpixel-antialiased}}@media (min-width:992px){.a-fontSizeL{font-size:24px;font-size:2.4rem;line-height:1.5;-webkit-font-smoothing:subpixel-antialiased}}.a-fontSizeM,.a-fontSizeS,.a-fontSizeXS{font-size:16px;font-size:1.6rem;line-height:1.5;-webkit-font-smoothing:subpixel-antialiased}@media (min-width:768px){.a-fontSizeM{font-size:18px;font-size:1.8rem;line-height:1.5;-webkit-font-smoothing:subpixel-antialiased}}@media (min-width:992px){.a-fontSizeM{font-size:20px;font-size:2rem;line-height:1.5;-webkit-font-smoothing:subpixel-antialiased}}@media (min-width:768px){.a-fontSizeS{font-size:18px;font-size:1.8rem;line-height:1.5;-webkit-font-smoothing:subpixel-antialiased}}@media (min-width:768px){.a-md-fontSizeXS{font-size:16px;font-size:1.6rem;line-height:1.5;-webkit-font-smoothing:subpixel-antialiased}}.a-fontSizeXXS{font-size:14px;font-size:1.4rem;line-height:1.5;-webkit-font-smoothing:subpixel-antialiased}.a-fontSizeXXXS{font-size:12px;font-size:1.2rem;line-height:1.5;-webkit-font-smoothing:subpixel-antialiased}.a-fontSizeXXXXS{font-size:10px;font-size:1rem;line-height:1.5;-webkit-font-smoothing:subpixel-antialiased}.a-sg-switch-dropdown .a-sg-sellabel,.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.altinn li .a-sg-project-name,.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.altinnett li .a-sg-project-name,.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.brsys li .a-sg-project-name{font-family:DIN-bold;font-weight:400;padding:0 0 0 2px;margin:0;color:#000;text-transform:none}.a-sg-switch-dropdown{position:relative;width:260px;margin:0;text-align:left;-webkit-perspective:800px;perspective:800px}.a-sg-switch-dropdown.active{z-index:99999}.a-sg-switch-dropdown.active .a-sg-sellabel::after{color:#78AFCA;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.altinn li{height:48px;line-height:48px}.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.altinn li:nth-child(1){-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.altinn li:nth-child(2){-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.altinn li:nth-child(3){-webkit-transform:translateY(200%);-ms-transform:translateY(200%);transform:translateY(200%)}.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.altinn li .a-sg-project-name{font-family:DIN-bold;font-weight:400}.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.brsys li{height:48px;line-height:48px}.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.brsys li:nth-child(1){-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.brsys li:nth-child(2){-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.brsys li:nth-child(3){-webkit-transform:translateY(200%);-ms-transform:translateY(200%);transform:translateY(200%)}.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.brsys li .a-sg-project-name{font-family:DIN-bold;font-weight:400}.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.altinnett li{height:48px;line-height:48px}.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.altinnett li:nth-child(1){-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.altinnett li:nth-child(2){-webkit-transform:translateY(200%);-ms-transform:translateY(200%);transform:translateY(200%)}.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.altinnett li:nth-child(3){-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.altinnett li .a-sg-project-name{font-family:DIN-bold;font-weight:400}.a-sg-switch-dropdown>span{position:relative;z-index:99999;display:block;width:212px;height:48px;padding:0 50px 0 0;line-height:48px;color:#000;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#BCE4F7;-webkit-transition:-webkit-transform 300ms;transition:transform 300ms;-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0}.a-sg-switch-dropdown>span:after{color:#78AFCA;content:'\25BC';font-size:9px;margin-left:3px}.a-sg-switch-dropdown>span:hover{cursor:pointer;background-color:#B0DCF1}.a-sg-switch-dropdown-list{position:absolute;top:0;width:220px}.a-sg-switch-dropdown-list li{position:absolute;top:0;left:-10px;display:block;width:100%;height:50px;padding-left:10px;list-style:none;background-color:#BCE4F7;opacity:1;-webkit-transition:-webkit-transform 300ms ease;transition:transform 300ms ease}.a-sg-switch-dropdown-list li:hover{cursor:pointer;background-color:#B0DCF1}.a-sg-switch-dropdown-list li span{display:block;width:100%;padding:0 20px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.a-sg-content-preloader{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99;background-color:#BCE4F7;display:none}.a-sg-content-preloader-status{position:absolute;top:50%;left:50%;width:120px;height:120px;margin:-100px 0 0 -100px;border:16px solid #F3F3F3;border-top:16px solid #3498DB;border-radius:50%;animation:spin 2s linear infinite;-webkit-animation:spin 2s linear infinite;display:none}#patternlab-body,#patternlab-html{background:#FFF}#sg-gen-container,#sg-viewport{max-width:100%}#sg-vp-wrap{top:88px;background:#1EAEF7}#atomer-footnote,#atomer-popover,#atomer-tooltip{display:none}.sg-header{font-family:DIN-reg;font-weight:400;width:100%;background:#BCE4F7;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.sg-header a{padding:9px 12px 7px;font-size:12px;color:#000;line-height:18px}.sg-header a.active,.sg-header a:active,.sg-header a:focus,.sg-header a:hover{color:#000;background:#B0DCF1}.sg-header a.sg-acc-handle{height:36px}.sg-header .sg-icon{padding:9px 12px 11px}.typeahead:focus{color:#000;text-transform:uppercase}.typeahead.tt-input{background-color:#FFF;border:2px solid #1EAEF7}.sg-nav .sg-pattern-state:before{margin-top:0}@media (min-width:48em){.sg-nav>li>ol{top:36px}}.sg-current-size{color:#555;padding:11px 12px 13px;font-size:12px}.sg-acc-panel{min-width:14em}.sg-acc-panel .sg-size-options{min-width:auto}.sg-acc-panel .sg-sub-nav li{background:#b0dcf1}.sg-acc-panel li{background:#bce4f7;color:#000}.sg-input{background-color:#bce4f7;color:#000}.sg-controls{top:56px}@media (max-width:1199px){.sg-controls{display:none}}.sg-control .sg-input:active,.sg-control .sg-input:focus,.sg-current-size:hover .sg-input{background:#FFF}.sg-acc-handle:after{color:#78afca;content:'\25BC'}.sg-acc-handle:focus:after,.sg-acc-handle:hover:after{color:#50778a}.sg-acc-handle.active:after{color:#50778a;top:-4px}.sg-tools-toggle{background:#bce4f7;padding:11px 10px 4px 4px}.sg-tools-toggle.active,.sg-tools-toggle:hover{background:#b0dcf1}.sg-control .sg-input:active,.sg-control .sg-input:focus,.sg-current-size:hover .sg-input{color:#000}.sg-nav-toggle{width:100%}code .tag,pre .tag{display:inline;padding:0;font-size:inherit;font-weight:400;line-height:1;white-space:pre-wrap}.sg-pattern-title{display:inline-block}.sg-pattern-title a:focus,.sg-pattern-title a:hover{border:none}.sg-top{background:#cff0ff;color:#000;padding:100px 0 120px;border-bottom:6px solid #fff}.sg-top h1,.sg-top h2{color:#000}.sg-top img{float:right;padding-top:30px}.sg-atom{display:block;width:250px;height:250px;float:right;margin-top:24px;margin-right:.5rem;background:url(../images/lab5.png) no-repeat;background-size:100% 100%;-webkit-animation:rotation 30s linear infinite;animation:rotation 30s linear infinite}@-webkit-keyframes rotation{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.sg-statesExplanation{background:#fff;padding:24px 0;margin-bottom:24px}.sg-statesExplanation .sg-pattern-state{margin-top:-10px;display:block}.sg-pattern-state,.sg-pattern-state:hover{border:none}.sg-statesExplanation .sg-pattern-state-inprogress{color:#e23b53}.sg-statesExplanation .sg-pattern-state-inreview{color:#FFA900}.sg-statesExplanation .sg-pattern-state-complete{color:#17c96b}.sg-statesExplanation .sg-pattern-state-variations{padding-right:6px}.sg-pattern-state:before{margin-bottom:0;vertical-align:middle;font-size:30px}.sg-pattern-variations{color:#666}[id^=viewall-atomer] a:before{content:'Atomer: ';color:#333}[id^=viewall-molekyler] a:before{content:'Molekyler: ';color:#333}[id^=viewall-organismer] a:before{content:'Organismer: ';color:#333}.sg-pattern-category{margin-top:36px;float:left;background:rgba(255,255,255,.5);border:2px dotted #1EAEF7;width:100%}@media (min-width:768px){.sg-pattern-category{width:calc(100% + 96px);margin-left:-48px}}.sg-pattern-category-title{margin:0;padding:0}.sg-pattern-category-title a{color:#6a6a6a;text-transform:uppercase;font-size:18px;text-decoration:none;border-bottom:none;margin:0;display:block;padding:12px 12px 8px}@media all and (min-width:768px){.sg-pattern-category-title a{padding:0 12px 0 45px;font-size:24px;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:48px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;top:2px}.sg-pattern-category-title a:hover:after{content:'Vis alle i denne kategorien';color:#1eaef7;font-size:14px;text-transform:none;padding:0 0 0 24px;margin-top:-3px;display:inline-block;vertical-align:middle;text-decoration:underline}}#sg-patterns .sg-pattern-head .sg-pattern-state:before{font-size:30px;margin-bottom:-4px}#sg-patterns .sg-pattern-extra-info .sg-pattern-state:before{font-size:30px;margin-bottom:0;line-height:0}#sg-code-lineager-fill .sg-pattern-state:before{margin-bottom:0}.sg-pattern-lineage .sg-pattern-state:before{font-size:18px}.sg-pattern{margin:12px 0;float:left;width:100%}.sg-pattern:last-child{margin-bottom:200px}.sg-pattern-head{margin:-2px 0 0;padding:0}.sg-pattern-head .patternLink,.sg-pattern-head .patternLink:hover{border:none;text-decoration:none;font-size:14px;text-transform:uppercase}.sg-pattern-title a{padding:6px 0}#sg-patterns .sg-pattern-title .sg-pattern-state{font-size:90%}#sg-patterns .sg-pattern-title .sg-pattern-state:before{margin-bottom:2px}.sg-pattern-extra{background:#fff}.sg-pattern-extra a,.sg-pattern-extra a:hover{text-decoration:none;color:#0062ba}.sg-pattern-extra a:hover{color:#1eaef7}.sg-annotations{padding:12px;background-color:#fbf6bd}.sg-annotations p{color:#000}.sg-annotations a{text-decoration:none}.has-annotation,.has-annotation:hover{cursor:inherit;-webkit-box-shadow:none;box-shadow:none}.sg-pattern-desc{border-bottom:none;color:#000}.sg-pattern-desc p{margin-bottom:6px}.sg-pattern-desc ul{padding-left:15px}.sg-pattern-desc ul li{padding-bottom:6px}.sg-tabs-list li a{background:#e5e2e0}.sg-tabs-list li.sg-tab-title-active a{background:#f5f2f0}.sg-pattern-example,.sg-pattern-extra,.sg-pattern-head{float:left;width:100%;clear:both}#organismer-chat .sg-pattern-example .a-chat{display:block;position:relative;bottom:0}#organismer-meny-personbytte .sg-pattern-example .dropdown-menu.a-dropdown-personswitchList{display:block}#organismer-meny-personbytte .a-listWithSubLevels .a-btn{display:-webkit-box;display:-ms-flexbox;display:flex}#molekyler-hjelp-container .a-stickyHelp-open{position:initial}.sg-pattern-extra-code{width:60%;padding:1em;min-height:300px}.sg-pattern-extra-code .language-html{margin-top:-12px}.sg-pattern-extra-toggle,.sg-pattern-extra-toggle.active,.sg-pattern-extra-toggle:focus,.sg-pattern-extra-toggle:hover{font-size:14px;background:#fff;border:1px solid #ddd}.sg-pattern-extra-toggle.active{border-bottom:1px solid #fff}.sg-pattern-extra-toggle span{font-size:9px}.sg-pattern-extra-toggle.active span{height:6px}.sg-pattern-extra-toggle:before{content:'Vis info'}.sg-pattern-extra-toggle.active:before{content:'Skjul info'}.sg-code{background:#000}.sg-code pre{color:#fff;margin-bottom:-20px}.sg-code .sg-code-head{margin:0}.sg-pattern-example .a-mediaBlock{max-width:300px}.sg-switchtheme{position:fixed;bottom:0;left:0;width:100%;background:#fff;z-index:9999;padding:12px 0;height:52px;border-top:2px solid #efefef}@media screen and (max-width:900px){.sg-switchtheme{display:none}}.sg-switchtheme .a-radioButtons .c-input{margin-bottom:3px}.a-sg-patternVariations{margin:12px 0}@media screen and (min-width:768px){.a-sg-patternVariations{padding-left:40px;border-left:5px solid #B3B3B3}}.a-sg-patternVariations .patternLink,.a-sg-patternVariations .sg-pattern-head{padding-top:0}body pre.language-markup{overflow-x:hidden}.language-markup:focus{outline:0}.archived:before,.sg-statesExplanation .sg-pattern-state-archived{color:#e23b53}.a-sg-js-showArchived{display:none}.sg-pattern-state .custom-control p{font-size:16px}.sg-statesExplanation .sg-pattern-state-specification,.specification:before{color:#708090}.inprogress:before,.sg-statesExplanation .sg-pattern-state-inprogress{color:orange}.indesignreview:before,.sg-statesExplanation .sg-pattern-state-indesignreview{color:#0062ba}.complete:before,.sg-statesExplanation .sg-pattern-state-complete{color:#17c96b}.needsrevalidation:before,.sg-statesExplanation .sg-pattern-state-needsrevalidation{color:#e23b53}.sg-pattern-head .archived,.sg-pattern-head .complete,.sg-pattern-head .indesignreview,.sg-pattern-head .inprogress,.sg-pattern-head .needsrevalidation,.sg-pattern-head .specification{display:inline-block}.a-sg-header-top{padding:10px 12px 9px;border-bottom:1px solid #cff0ff;height:54px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}a.a-sg-header-title,a.a-sg-header-title:hover{font-family:DIN-bold;font-weight:400;color:#000;font-size:16px;padding:0 0 0 2px;margin:0;text-transform:none;background:0 0}.a-sg-header-links{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right}@media (max-width:991px){.a-sg-header-links{display:none}}.a-sg-header-links a{padding:1px 0 0 24px;font-size:12px;color:#333;text-transform:none}.a-sg-header-links a:hover{color:#000;background:0 0}.sg-pattern-head .a-sg-anchor,.sg-pattern-head .a-sg-anchor:hover{margin-top:-3px;font-size:16px;color:#000;border:none}.a-sg-patternVariations .sg-pattern-head .a-sg-anchor,.a-sg-patternVariations .sg-pattern-head .a-sg-anchor:hover{margin-top:-8px}.sg-atom-brsys{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;width:250px;height:250px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.sg-electron-brsys{position:absolute;top:0;left:64px;display:inline-block;width:23px;height:23px;background-color:#FEAF16;border-radius:50%;-webkit-transition:top 1s ease-out,width .4s,height .4s,background-color .8s;transition:top 1s ease-out,width .4s,height .4s,background-color .8s}.sg-orbit-brsys{position:relative;display:inline-block;width:100px;height:100px;border:8px solid #0078CC;border-radius:50%;-webkit-transition:border-color .7s;transition:border-color .7s;-webkit-animation:spin 20s linear infinite;animation:spin 20s linear infinite}.sg-orbit-brsys:hover{border-color:#01B8E6}.sg-orbit-brsys:hover .core{margin-left:180px}.sg-orbit-brsys:hover .sg-electron-brsys{top:140px;width:30px;height:30px;background-color:#AA3444}.sg-core-brsys{display:inline-block;width:50px;height:50px;margin-top:17px;margin-left:17px;background-color:#EB5C31;border-radius:50%;-webkit-transition:margin-left .8s;transition:margin-left .8s}@-webkit-keyframes spin{from{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}to{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes spin{from{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}to{-webkit-transform:rotate(0);transform:rotate(0)}}.sg-nav-container{min-height:34px}.sg-switchtheme{display:none}.a-sg-anchor{display:none}.sg-pattern .a-sg-anchor{display:inline-block}