altinn-designsystem/source/styleguidekit/styleguide/css/styleguide.css

Altinn Design system based on Pattern Lab.

/*------------------------------------*\
#PATTERN LAB STYLES
\*------------------------------------*/
/**
* NOTES:
* 1) These styles are specific to Pattern Lab and should not be modified.
* All project styles should be modified in /source/css/
*
* 2) Any !important declarations are to prevent brand styles from overriding
* style guide styles
*/
/*------------------------------------*\
#TABLE OF CONTENTS
\*------------------------------------*/
/**
* PATTERN LAB VARIABLES
* Fonts.......................
* Colors......................
* Typography..................
* Spacing & Padding...........
* Breakpoints.................
* Animation...................
* Borders.....................
*
* RESET.......................CSS reset
*
* UTILITY CLASSES.............Establish global styles
*
* GLOBAL ELEMENTS.............Establish global styles
* -----Main
* -----Headings
* -----Text-related elements (p, blockquote, lists)
* -----Defaults
* -----Breakpoints
* STYLE GUIDE INTERFACE------------------CSS for the Pattern Lab Container.
* -----Header
* -----Navigation
* -----Controls
* -----Main Container
* -----Viewport
* -----Section Headers
* -----Code View
*/
/*------------------------------------*\
#VARIABLES
\*------------------------------------*/
/**
* These variables are specific to the Pattern Lab shell and exist
* indepenedently of any project-specific styles
*/
/*------------------------------------*\
#RESET
\*------------------------------------*/
/**
* Apply border-box to all elements
*
* 1) This is a broadly-applied style that affects every
* element on the screen. This can bleed into user's styles
* but since it's been a best practice for years now we're
* going to default to this.
*/
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*------------------------------------*\
#UTILITIES
\*------------------------------------*/
/**
* Visibilly hidden but still accessible to screen readers
*/
.is-vishidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
}

/*------------------------------------*\
#PATTERN LAB INTERFACE
\*------------------------------------*/
/**
* html & body tag
*/
#patternlab-html, #patternlab-body {
  margin: 0;
  padding: 0;
  background: #DDDDDD;
  -webkit-text-size-adjust: 100%;
}

/*------------------------------------*\
#HEADER
\*------------------------------------*/
/**
* Pattern Lab's header is fixed across the top of the viewport and
* contains the primary pattern navigation, viewport resizing items,
* and tools.
*/
.sg-header {
  background: #000000;
  color: #FFFFFF;
  font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
  text-transform: uppercase;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  /**
  * All lists appearing in the header
  */
  /**
  * All links appearing in the header
  */
}
.sg-header ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.sg-header a {
  font-size: 70%;
  color: #808080;
  text-decoration: none;
  line-height: 1;
  padding: 1em 0.7em;
  -webkit-transition: background 0.1s ease-out;
          transition: background 0.1s ease-out;
  -webkit-transition: color 0.1s ease-out;
          transition: color 0.1s ease-out;
}
.sg-header a:hover, .sg-header a:focus, .sg-header a.active {
  color: #FFFFFF;
  background: #222222;
}

/*------------------------------------*\
#NAVIGATION
\*------------------------------------*/
/**
* Nav toggle expands and collapses .sg-nav
* 1) On larger viewports, the toggle gets hidden and
* the full nav is displayed across the top.
*/
.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;
  }
}

/**
* Navigation container
*/
@media all and (max-width: 42em) {
  .sg-nav-container {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: max-height 0.1s ease-out;
            transition: max-height 0.1s ease-out;
  }
  .sg-nav-container.active {
    max-height: 50em;
  }
}

/**
* Nav list
* 1) appears as an <ol>
*/
.sg-nav {
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  /**
  * Nav <ol> list
  */
  /**
  * Links within the nav
  */
}
.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;
}

/*------------------------------------*\
#ACCORDION
\*------------------------------------*/
/**
* Accordions are dropdowns used for the primary nav and
* tools dropdowns.
*/
.sg-acc-handle {
  /**
  * Dropdown caret after accordion handle
  */
}
.sg-acc-handle:after {
  content: '\25bc';
  color: rgba(255, 255, 255, 0.25);
  display: inline-block;
  font-size: 7px;
  position: relative;
  top: -1px;
  right: -2px;
  -webkit-transition: all 0.1s ease-out;
          transition: all 0.1s ease-out;
}
@media all and (min-width: 42em) {
  .sg-acc-handle:after {
    float: none;
  }
}
.sg-acc-handle:hover:after, .sg-acc-handle:focus:after {
  color: #808080;
}
.sg-acc-handle.active {
  color: #FFFFFF;
  background: #222222;
}
.sg-acc-handle.active:after {
  top: -2px;
  color: #808080;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

/**
* Accordion panel
*/
.sg-acc-panel {
  overflow: hidden;
  max-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 10em;
  -webkit-transition: max-height 0.1s ease-out;
          transition: max-height 0.1s ease-out;
  /**
  * List items appearing in each accordion panel
  */
  /**
  * Links appearing in each accordion panel
  */
  /**
  * Active is when accordion panel is open
  */
  /**
  * Right align accordion dropdown
  */
}
.sg-acc-panel li {
  background: #222222;
}
.sg-acc-panel li:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.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;
}

/**
* Sub-navigation
* 1) Third-level links are stylistically different
* than first and second nav links.
*/
.sg-sub-nav {
  list-style: none;
}
.sg-sub-nav a {
  text-transform: none;
  padding-left: 1rem;
}

/*------------------------------------*\
#CONTROLS
\*------------------------------------*/
/**
* Controls contains viewport resizer and tools dropdown
*/
.sg-controls {
  border: 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}

/**
* Control list
*/
.sg-control > li {
  float: left;
}

/*------------------------------------*\
#ISH STYLES
\*------------------------------------*/
/**
* 1) ish. (http://bradfrost.com/demo/ish/) is a viewport-resizing tool
* that's built into Pattern Lab.
*/
/**
* Size Container
*/
.sg-size {
  width: 135px;
}
@media all and (min-width: 42em) {
  .sg-size {
    width: auto;
  }
}

/**
* Current size
* 1) This is the wrapper for the form that houses the current
* viewport size in px and em
*/
.sg-current-size {
  font-size: 70%;
  color: #808080;
  padding: 0.85em 0.7em;
}
@media all and (min-width: 53em) {
  .sg-current-size {
    float: left;
  }
}

/**
* The <form> for the current size
*/
#sg-form {
  margin: 0;
  border: 0;
  padding: 0;
}

/**
* Size input fields
*/
.sg-input {
  margin: -2px 0 0 0;
  padding: 0.1em;
  border: 0;
  border-radius: 3px;
  background: #000000;
  color: #808080;
  width: 25px;
  text-align: right;
  -webkit-transition: all 0.1s ease-out;
          transition: all 0.1s ease-out;
}
.sg-input:hover {
  color: #FFFFFF;
  background: #222222;
}
.sg-input:active, .sg-input:focus {
  outline: 0;
  background: #808080;
  color: #FFFFFF;
}
@media all and (min-width: 42em) {
  .sg-input {
    width: 35px;
  }
  .sg-input.sg-size-px {
    width: 30px;
  }
}

/**
* Size options
* 1) This holds the S, M, L, Rand, Disco links
* 2) Depending on the config, these number of options may be
* larger or smaller.
*/
.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;
  }
}

/*------------------------------------*\
#TOOLS DROPDOWN
\*------------------------------------*/
/**
* The tools dropdown contains more utilities such as show/hide
* pattern info and pattern search, and also links to open in a
* new window and view the documentation
*/
/**
* Tools dropdown button
*/
.sg-tools-toggle {
  font-size: 70%;
  background: #000000;
  color: #808080;
  text-decoration: none;
  line-height: 1;
  border: 0;
  cursor: pointer;
  padding: 0.9em 0.7em 0.6em;
}
.sg-tools-toggle:after {
  display: none;
  content: "";
}

/**
* Pattern Finder
* 1) This is the container for pattern search, which
* is handled by Typeahead (see below styles)
*/
.sg-find {
  position: relative;
}

/*------------------------------------*\
#TYPEAHEAD
\*------------------------------------*/
/**
* We're using Twitter Typeahead to autocomplete pattern
* searches. https://twitter.github.io/typeahead.js/
*/
.twitter-typeahead {
  width: 100%;
}

.typeahead {
  border: 0;
  background: #222222;
  color: #808080;
  width: 100%;
  right: 0;
  padding: 0.8em;
  text-transform: lowercase;
}
.typeahead:focus {
  background: #808080;
  color: #FFFFFF;
}

.tt-input {
  background: #808080;
  color: #FFFFFF;
  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: #808080;
  width: 100%;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

.tt-suggestion {
  color: #EEEEEE;
  font-size: 75%;
  padding: 0.8em;
}

.tt-suggestion.tt-cursor {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.25);
}

.tt-suggestion p {
  margin: 0;
}

/*------------------------------------*\
#PATTERN STATES
\*------------------------------------*/
/**
* Pattern states add color-coded dots next to patterns
* in the dropdown navigation.
*/
.sg-pattern-state {
  text-transform: none !important;
}

/**
* Pattern State bullet
*/
.sg-pattern-state:before {
  content: "\2022";
  margin-right: 4px;
  font-size: 18px;
  vertical-align: bottom;
  display: inline-block;
  text-decoration: none;
}

/**
* when part of a lineage muck with the size
*/
.sg-pattern-lineage .sg-pattern-state:before {
  font-size: 12px;
}

/**
* when part of a view all view muck with the size
*/
#sg-patterns .sg-pattern-state:before {
  font-size: 14px;
}

#sg-patterns .sg-pattern-state {
  color: #666;
}

/**
* Pattern States that appear in the dropdown nav
*/
.sg-nav .sg-pattern-state:before {
  margin-top: -4px;
  margin-bottom: 0;
  margin-left: -4px;
  height: 20px;
  display: block;
  float: left;
}

/**
* In Progress state
*/
.inprogress:before {
  color: #FF4136 !important;
}

/**
* In Review state
*/
.inreview:before {
  color: #FFCC00 !important;
}

/**
* Complete state
*/
.complete:before {
  color: #2ECC40 !important;
}

/*------------------------------------*\
#PATTERN LAB VIEWPORT
\*------------------------------------*/
/**
* To keep user code and PL code separate, and to make
* resizing the viewport possible, PL contains an iframe
* that houses all user code.
*/
/**
* Viewport wrapper div
* 1) This wrapper div occupies all remaining viewport space after PL's header
*/
#sg-vp-wrap {
  text-align: center;
  width: 100%;
  position: fixed;
  top: 2em;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

/**
* Cover
* 1) This is an invisible div that sits above the iframe and is
* used in JS for manual viewport resizing purposes.
*/
#sg-cover {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  z-index: 20;
  cursor: col-resize;
}

/**
* Gen Cover
* 1) This is
*/
#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;
}

/**
* Viewport iframe
* 1) this is the actual <iframe>
*/
#sg-viewport {
  position: absolute;
  height: 100%;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  /**
  * Hay Mode transition
  * 1) Hay Mode (disabled by default) starts with the smallest
  * viewport then slowly expands http://bradfrost.com/blog/post/ish-2-0/
  */
}
#sg-viewport.hay-mode {
  -webkit-transition: all 40s linear;
          transition: all 40s linear;
}

/**
* Right pull container
* 1) Container used for manual resizing
*/
#sg-rightpull-container {
  width: 14px;
  float: right;
  margin: 0;
  height: 100%;
  cursor: col-resize;
}

/**
* Right pull
* 1) This is the handle that lets the user resize the viewport
*/
#sg-rightpull {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #c2c2c2;
  -webkit-transition: background 0.1s ease-out;
          transition: background 0.1s ease-out;
}
#sg-rightpull:hover {
  background: #808080;
}
#sg-rightpull:active {
  cursor: col-resize;
  background: #666;
}

/**
* VP animate
* 1) This is an added class that is activated by JS to
* transition the width of the viewport
*/
.vp-animate {
  -webkit-transition: width 0.8s ease-out;
          transition: width 0.8s ease-out;
}

/*------------------------------------*\
#PATTERN LAB CONTENT
\*------------------------------------*/
/**
* Pattern
* 1) This is an individual pattern that appears in the "view all" template.
* It contains pattern title and toggle to view more information, such as
* description, lineage, code, etc.
* 2) Prevents absolutely-positioned elements from floating to the top
* 3) Prevents floated patterns from floating wraps
*/
.sg-pattern {
  margin-bottom: 2em;
  position: relative;
  /* 2 */
  clear: both;
  /* 3 */
}

/**
* Pattern Header
*/
.sg-pattern-head {
  position: relative;
  padding: 0.5rem 0 0;
  line-height: 1.3;
  font-size: 90%;
  color: #808080;
}
.sg-pattern-head:empty {
  padding: 0;
}

/**
* Pattern Title
*/
.sg-pattern-title {
  font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  font-weight: bold !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: capitalize !important;
  /**
  * Pattern State that appears within a pattern title
  */
}
.sg-pattern-title a {
  display: inline-block;
  padding: 1em 0 0.3rem;
  color: #808080 !important;
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
}
.sg-pattern-title a:hover, .sg-pattern-title a:focus {
  color: #000000 !important;
}
.sg-pattern-title .sg-pattern-state {
  font-size: 80%;
  font-weight: normal;
  color: #CCCCCC;
}

/**
* Pattern Extra Toggle Button
* 1) This is the button that twirls down extra pattern info
*/
.sg-pattern-extra-toggle {
  font-size: 9px;
  position: absolute;
  bottom: -1px;
  right: 0;
  z-index: 1;
  padding: 0.65em;
  line-height: 1;
  color: #808080;
  font-weight: normal;
  border: 1px solid #DDDDDD;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  -webkit-transition: background 0.1s ease-out;
          transition: background 0.1s ease-out;
}
.sg-pattern-extra-toggle span {
  display: inline-block;
}
.sg-pattern-extra-toggle:hover, .sg-pattern-extra-toggle:focus, .sg-pattern-extra-toggle.active {
  background: #EEEEEE;
  color: #000000;
}
.sg-pattern-extra-toggle.active {
  border-bottom-color: #EEEEEE;
}
.sg-pattern-extra-toggle.active span {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

/**
* Pattern Extra
* 1) This is the info panel that contains extra pattern info
* like pattern description, lineage, code, and more
*/
.sg-pattern-extra {
  background: #EEEEEE;
  border-top: 1px solid #DDDDDD;
  margin-bottom: 1em;
  overflow: hidden;
  max-height: 1px;
  -webkit-transition: all 0.1s ease-out;
          transition: all 0.1s ease-out;
}
.sg-pattern-extra a {
  text-decoration: underline;
  color: #222222;
}
.sg-pattern-extra a:hover, .sg-pattern-extra a:focus {
  color: #808080;
}
.sg-pattern-extra.active {
  border: 1px solid #DDDDDD;
  border-radius: 6px;
  border-top-right-radius: 0;
  max-height: 50em;
}

/**
* Pattern Extra
* 1) This is the info panel that contains extra pattern info
* like pattern description, lineage, code, and more
*/
@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;
  }
}

/**
* Pattern Extra Info
* 1) This div contains pattern description, lineage, status, and other info
*/
.sg-pattern-extra-info {
  padding: 0.5rem 0.5rem 0;
  line-height: 1.4;
  font-size: 90%;
  color: #808080;
  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%;
  }
}

/**
* Pattern Description
*/
.sg-pattern-desc {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #CCCCCC;
}
.sg-pattern-desc p:last-child {
  margin: 0;
}

/**
* Pattern Lineage info
*/
.sg-pattern-lineage {
  font-size: 90%;
  font-style: italic;
}

/**
* Pattern Code Container
*/
.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: 0.5rem;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  /**
  * Code blocks
  */
}
.sg-pattern-extra-code pre {
  overflow: scroll !important;
  -webkit-overflow-scrolling: touch;
  padding: 0 0.5rem 0.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;
  }
}

/**
* Pattern Category
* 1) This appears in the index page and delineates a major section,
*    such as "global", "blocks", "etc".
* 2) The category contains a title and optional description
*/
.sg-pattern-category {
  margin-top: 6rem;
  font: "HelveticaNeue", "Helvetica", "Arial", sans-serif !important;
}
.sg-pattern-category:first-of-type {
  margin-top: 2rem;
}

/**
* Pattern Category Title
*/
.sg-pattern-category-title {
  font-size: 1.4rem !important;
  color: #222222 !important;
  margin: 0 0 0.2rem;
  text-transform: capitalize;
}
.sg-pattern-category-title a {
  -webkit-transition: color 0.1s ease-out;
          transition: color 0.1s ease-out;
}

/**
* Pattern Category Description
* 1) This is an optional description that sits below the category title.
*/
.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;
  }
}

/*------------------------------------*\
#TABS
\*------------------------------------*/
.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 !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: bold;
  line-height: 1;
  padding: 0.5em 1em;
  background: #EEEEEE;
  border: 1px solid #CCCCCC;
  border-bottom: 0;
  color: #808080;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  text-decoration: none;
  text-transform: capitalize;
}
.sg-tabs-list a:hover {
  color: #222222;
}

/**
* Active Tab
* 1) Note: the active tab color corresponds with the Prism code block
* background color.
*/
.sg-tab-title-active a {
  background: #f5f2f0;
  /* 1 */
  color: #222222;
}
.sg-tab-title-active a:hover, .sg-tab-title-active a:focus {
  color: #222222;
}

.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 #CCCCCC;
  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;
  }
}

/*------------------------------------*\
#MODAL
\*------------------------------------*/
/**
* The modal appears when "show pattern info" is selected
* on the pattern detail screen.
*/
.sg-modal {
  font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
  line-height: 1.4;
  font-size: 90%;
  background: #000000;
  color: #CCCCCC;
  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;
  /**
  * Pattern Breadcrumbs inside modal
  */
  /**
  * Pattern Header inside modal
  */
  /**
  * Pattern Title inside modal
  */
  /**
  * Pattern Information inside modal
  */
  /**
  * Pattern info links inside modal
  */
  /**
  * Pattern Description inside modal
  */
  /**
  * Pattern Annotations inside modal
  */
  /**
  * Pattern tab panel inside modal
  */
}
.sg-modal.anim-ready {
  -webkit-transition: bottom 0.3s ease-out;
          transition: bottom 0.3s ease-out;
}
.sg-modal .sg-pattern-breadcrumb {
  font-size: 70%;
  color: #808080;
  margin-bottom: 0.5rem;
}
.sg-modal .sg-pattern-head {
  margin-bottom: 0.5rem;
}
.sg-modal .sg-pattern-title {
  font-size: 1.4rem !important;
  color: #EEEEEE;
}
.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: #CCCCCC;
}
.sg-modal .sg-pattern-extra-info a:hover, .sg-modal .sg-pattern-extra-info a:focus {
  color: #EEEEEE;
}
.sg-modal .sg-pattern-desc {
  border-bottom-color: #808080;
}
.sg-modal .sg-annotations {
  border-top-color: #808080;
}
.sg-modal .sg-tabs-content {
  border: 0;
}

/**
* Modal close button
* 1) Closes the modal popup
* 2) Reposition to jut out of modal if parent modal has class of active
*/
.sg-modal-close-btn {
  font-size: 70%;
  background: #000000;
  color: #808080;
  border: 0;
  border-radius: 6px 6px 0 0;
  display: inline-block;
  padding: 0.9em 0.7em 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 1rem;
  -webkit-transition: all 0.1s ease-out;
          transition: all 0.1s ease-out;
  /* 2 */
}
.sg-modal.active .sg-modal-close-btn {
  top: -1.5rem;
}
.sg-modal-close-btn:hover, .sg-modal-close-btn:focus {
  background: #222222;
  color: #EEEEEE;
}

/**
* Modal Content
*/
.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;
}

/**
* Modal Content Inner Wrapper
*/
.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;
}

/**
* Annotations
* 1) Annotation styles that appear in the modal
*/
/**
* Annotated elements styles
* 1) For elements in the DOM that have an annotation, we want to
* provide styles that help the user understand that annotations are available.
* We do this with some cursor helpers and a
*/
.has-annotation {
  cursor: help !important;
  -webkit-box-shadow: 0 0 10px #808080;
          box-shadow: 0 0 10px #808080;
}
.has-annotation a, .has-annotation input {
  cursor: help !important;
}
.has-annotation:hover {
  -webkit-box-shadow: 0 0 10px #000000;
          box-shadow: 0 0 10px #000000;
}
.has-annotation.active {
  -webkit-box-shadow: inset 0 0 20px #808080;
          box-shadow: inset 0 0 20px #808080;
}

.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: bold !important;
  font-size: 16px !important;
  z-index: 100;
}

.sg-annotations {
  margin: 1rem 0;
  border-top: 1px solid #DDDDDD;
  padding-top: 0.5rem;
}

.sg-annotations-title {
  font-size: 1rem !important;
  margin: 0 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 0.1s ease;
          transition: background 0.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: #CCCCCC;
  color: #222222;
  position: absolute;
  top: 1px;
  left: 0;
}
.sg-annotations-list > li.active {
  background: rgba(255, 255, 255, 0.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, 0.25);
}
.sg-comment-container p:last-child {
  margin-bottom: 0;
}
.sg-comment-container h2 {
  margin-bottom: 0.25em;
}

/* Modifications */
@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");
}
button,
input,
optgroup,
select,
textarea,
.popover {
  font-family: "DIN-reg";
  font-weight: normal;
}

.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-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;
  }
}

.a-fontSizeL {
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.5;
  -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 {
  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;
  }
}

.a-fontSizeS {
  font-size: 16px;
  font-size: 1.6rem;
  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;
  }
}

.a-fontSizeXS {
  font-size: 16px;
  font-size: 1.6rem;
  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.brsys li .a-sg-project-name, .a-sg-switch-dropdown.active .a-sg-switch-dropdown-list.altinnett li .a-sg-project-name {
  font-family: "DIN-bold";
  font-weight: normal;
  padding: 0 0 0 2px;
  margin: 0;
  color: #000000;
  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: normal;
}
.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: normal;
}
.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: normal;
}
.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: #000000;
  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;
}

/* EDIT PATTERNLAB STYLE */
#patternlab-body,
#patternlab-html {
  background: #FFFFFF;
}

#sg-gen-container,
#sg-viewport {
  max-width: 100%;
}

#sg-vp-wrap {
  top: 88px;
  background: #1EAEF7;
}

/* Hacky hide */
#atomer-footnote,
#atomer-popover,
#atomer-tooltip {
  display: none;
}

/* Header */
.sg-header {
  font-family: "DIN-reg";
  font-weight: normal;
  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: #000000;
  line-height: 18px;
}
.sg-header a.active, .sg-header a:active, .sg-header a:focus, .sg-header a:hover {
  color: #000000;
  background: #B0DCF1;
}
.sg-header a.sg-acc-handle {
  height: 36px;
}
.sg-header .sg-icon {
  padding: 9px 12px 11px;
}

.typeahead:focus {
  color: #000000;
  text-transform: uppercase;
}
.typeahead.tt-input {
  background-color: #FFFFFF !important;
  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 {
  background: #FFFFFF;
}

.sg-current-size:hover .sg-input {
  background: #FFFFFF;
}

.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: #000000;
}

.sg-nav-toggle {
  width: 100%;
}

/* Resolve .tag conflict */
code .tag,
pre .tag {
  display: inline;
  padding: 0;
  font-size: inherit;
  font-weight: normal;
  line-height: 1;
  white-space: pre-wrap;
}

/* Misc. */
.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 #ffffff;
}

.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: 0.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: #ffffff;
  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;
}

.sg-pattern-state:before {
  font-size: 30px;
}

.sg-pattern-variations {
  color: #666;
}

/* Category */
[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, 0.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;
  }
}
/* Pattern */
#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 !important;
}

.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;
}

/* view info */
.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;
}

/* Fix float issue */
.sg-pattern-example,
.sg-pattern-extra,
.sg-pattern-head {
  float: left;
  width: 100%;
  clear: both;
}

/* View patterns that in is context is display none from start */
#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 !important;
}

#organismer-meny-personbytte .a-listWithSubLevels .a-btn {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

#molekyler-hjelp-container .a-stickyHelp-open {
  position: initial;
}

/* Code view height minimum 300px */
.sg-pattern-extra-code {
  width: 60%;
  padding: 1em;
  min-height: 300px;
}

.sg-pattern-extra-code .language-html {
  margin-top: -12px;
}

/* Toggle comments code in V2 */
.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;
}

/* Spesific styling for components used in all */
.sg-pattern-example .a-mediaBlock {
  max-width: 300px;
}

.sg-switchtheme {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  z-index: 9999;
  padding: 12px 0;
  height: 52px;
  border-top: 2px solid #efefef;
}

/* Switch theme */
@media screen and (max-width: 900px) {
  .sg-switchtheme {
    display: none;
  }
}
.sg-switchtheme .a-radioButtons .c-input {
  margin-bottom: 3px;
}

/* Added styles */
.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;
}

/* Line breaking in code boxes */
body pre.language-markup {
  overflow-x: hidden !important;
}

/* Select all for code boxes */
.language-markup:focus {
  outline: none;
}

/**
* Archived
*/
.archived:before,
.sg-statesExplanation .sg-pattern-state-archived {
  color: #e23b53 !important;
}

.a-sg-js-showArchived {
  display: none !important;
}

.sg-pattern-state .custom-control p {
  font-size: 16px;
}

/**
* In specification state
*/
.sg-statesExplanation .sg-pattern-state-specification,
.specification:before {
  color: slategrey !important;
}

/**
* In progress state
*/
.inprogress:before,
.sg-statesExplanation .sg-pattern-state-inprogress {
  color: orange !important;
}

/**
* In design review state
*/
.indesignreview:before,
.sg-statesExplanation .sg-pattern-state-indesignreview {
  color: #0062ba !important;
}

/**
* Complete state
*/
.complete:before,
.sg-statesExplanation .sg-pattern-state-complete {
  color: #17c96b !important;
}

/**
* In needs revalidation state
*/
.needs