/* Version control for docs */
.content-version-selector.border-box .content-version-container {
    border: 1px solid #0062ba;
    padding:24px;
    margin-bottom: 36px;
    width: 100%;
}

#content-version-tabs li:not(:last-child) {
    border-right: none;
}

#content-version-tabs li {
    list-style: none!important;
    display:inline-block;
    padding: 5px 20px;
    border: 1px solid #0062ba;
    border-bottom: none;
    background-color: #FFFFFF;
    margin-bottom: 0px;
    margin-top: 24px;
    color: #0062ba
}

#content-version-tabs li.active {
    border-color: #00315D;
    background-color: #B3D0EA;
    color: #00315D;
}

#content-version-tabs li.focus {
    border-color: #0062BA;
    background-color: #FFFFFF;
    color: #0062BA;
}

#content-version-tabs li::before {
    display: none!important;
}

#content-version-tabs li:hover {
    border-color: #004E95;
    background-color: #E6EFF8;
    color: #004E95;
    cursor: pointer;
}

/* External links */

a[href^=http]:not([href*='altinn.no']):not([href*='basefarm.net']):not([href*='local.altinn'])::after {
    display: inline-block;
    width: 0;
    margin-left: 0;
    content: '';
}

a[href^=http]:not([href*='localhost']):not([href*='docs.altinn.studio']):not([href*='https://github.com/Altinn/altinn-studio/'])::after {
    display: inline-block;
    width: 1.3em;
    background-image: url("https://altinn.no/images/arrowrightup.svg");
    background-repeat: no-repeat;
    background-size: 119% auto;
    vertical-align: middle;
    margin-top: -4px;
    margin-left: -3px;
    content: '(external link)';
    white-space: nowrap;
    overflow: hidden;
    text-indent: 1.3em;
}

.a-footer a[href^=http]:not([href*='localhost']):not([href*='docs.altinn.studio']):not([href*='/docs/'])::after  {
    display: none;
}

.a-iconText-text a[href^=http]:not([href*='altinn.no']):not([href*='basefarm.net']):not([href*='local.altinn'])::after {
    display: inline-block;
    width: 0;
    margin-left: 0;
    content: '';
}

.a-illustration-icon {
    background: #022F51;
}

.a-illustrationLink {
    margin-bottom: 0;
}

/* Header */

.a-header {
    background: #022F51;
}

.a-globalNav-main .a-label {
    padding: 2px 9px 0px 9px;
}

@media (min-width: 768px) {
    .a-globalNav-main .a-label {
        margin-left: 4px;
        position: absolute;
    }
}

.a-globalNav .a-globalNav-logo {
    margin-left: 3px;
}

@media (min-width: 576px) {
    .a-globalNav .a-globalNav-logo {
        margin-left: 12px;
    }
}

@media (min-width: 768px) {
    .a-globalNav-main li:last-child a {
        border-bottom: none;
    }
}

@media (min-width: 992px) {
    .a-header  {
        padding-top: 33px;
    }
    .a-header .a-logo {
        max-width: 284px;
        margin-top: 1px;
    }
    .a-globalNav .a-globalNav-logo {
        margin-left: 0;
    }
}

.a-globalNav-logo {
    margin-top: -3px; 
}

.adocs-logo {
    margin-top: 2px;
    max-width: 240px;
}

.adocs-logo-text {
    display: inline-flex;
    max-width: 120px;
    white-space: nowrap;
}

@media (min-width: 576px) {
    .adocs-logo-text {
        display: inline-flex;
        max-width: 220px;
        white-space: nowrap; 
    }
}

.adocs-logo-text span {
    font-size: 24px;
    overflow: hidden !important;
    color: white;
    text-overflow: ellipsis;
    text-transform: lowercase;
}

body.adocs-apps .a-globalNav-main li a[href*='/app/'],
body.adocs-apis .a-globalNav-main li a[href*='/api/'],
body.adocs-comm .a-globalNav-main li a[href*='/community/'],
body.adocs-tech .a-globalNav-main li a[href*='/technology/'] {
    border-bottom: solid #1e98f5 3px !important;
}

/* Jumbotron */

.a-jumbotron-header {
    background-size: 100%;
}

/* TOC */

#TableOfContents {
    margin-bottom: 24px;
}

/* Lists */

.a-text ul.connected-bullets {
    margin-left: 36px;
}

ul.connected-bullets li::after {
    background: #fff;
}

/* Scrollable tables */
#body-inner table {
    display: block;
    width: 98%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    margin-bottom: 2em;
}
#body-inner table th {
    border: 1px solid #eaeaea;
}

/* Avoid large margin for images in tables */
#body td a > img {
    margin: 0 auto !important;
}

blockquote {
    border-left: 5px solid #1eaef7;
    margin-left: 1em;
    padding-left: 0.5em;
}
blockquote p {
    font-size: 1.1rem;
    color: #222;
}
li > label {
    font-weight: normal;
}

/* Footer */ 

.adocs-footer {
    margin-top: 60px;
    padding: 36px;
    background: #022F51;
}

.adocs-footer ul {
    text-align: center;
}

.adocs-footer ul li{
    display: inline;
    padding:  0 12px;
}

.adocs-footer ul li a{
    display: inline;
    color: #fff;
    border-bottom: 1px solid #fff;
}

.adocs-footer ul li a:after {
    content: none !important;
}

/* img */

figure {
    margin-bottom: 36px;
}


/* Case block */

.adocs-caseblock a{
    color: white;
    border-color: white;
}

.adocs-caseblock a:after {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

/* Featured blocks */ 

.adocs-featuredBlocks .a-list-container {
    max-width: 300px;
}

.adocs-featuredBlocks .a-illustrationLink {
    margin-bottom: 0;
    max-width: 350px;
    margin: auto;
}

.adocs-caseblock .a-linkFeatured {
    align-self: flex-start;
    color: #022F51;
    height: 32px;
}

.adocs-caseblock .a-btn-border {
    padding: 5px 24px 7px 24px;
}


/* Display preview of colors */ 


.ap-colorCircle {
    font-size: 24px;
    display: inline-block;
    width: 48px;
    height: 48px;
    padding-top: 5px;
    margin-right: 1rem;
    text-align: center;
    vertical-align: middle;
    border-radius: 999px; } 
  
  .ap-shadowBox {
    display: block;
    width: 100px;
    height: 100px;
    background: #fff;
    box-shadow: 1px 1px 4px 0 rgba(137, 137, 137, 0.5); 
}
  
  .ap-colors {
    margin-left: 0;
    clear: both;
    list-style: none; }
    .ap-colors li {
      float: left;
      width: 100%;
      padding: 0 10px 0 0;
      margin: 0;
      border: none; }
      @media screen and (min-width: 768px) {
        .ap-colors li {
          width: 25%; }
          .ap-colors li:last-child {
            padding-right: 0; } }
  
  .ap-colorLabel {
    display: none;
    line-height: 24px; }
  
  .ap-swatch {
    position: relative;
    display: block;
    width: 100%;
    height: 78px;
    padding-top: 15px;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 2px; }
    .ap-swatch .ap-colorLabel {
      position: absolute;
      top: 12px;
      right: -100%;
      bottom: 0;
      left: 0;
      display: block;
      opacity: 0;
      transition: 0.2s all; }
    .ap-swatch:hover .ap-colorLabel {
      right: 0;
      display: block;
      opacity: 1; }
  
  .ap-typo-container {
    border-top: 1px dotted #eee; }
  
  .ap-typo {
    padding: 30px 0 30px 40px;
    background: #fff;
    border-bottom: 1px dotted #eee; }
    .ap-typo:hover {
      background: #F5F5F5; }
    .ap-typo h1,
    .ap-typo h2,
    .ap-typo h3,
    .ap-typo h4 {
      margin-top: 0; }
  
  @media screen and (min-width: 576px) {
    .ap-typo-activeSize-m {
      font-family: 'DIN-bold';
      color: #17C96B; } }
  
  @media screen and (min-width: 768px) {
    .ap-typo-activeSize-t {
      font-family: 'DIN-medium';
      color: #17C96B; } }
  
  @media screen and (min-width: 992px) {
    .ap-typo-activeSize-l {
      font-family: 'DIN-bold';
      color: #17C96B; } }
  
  @media screen and (min-width: 1200px) {
    .ap-typo-activeSize-d {
      font-family: 'DIN-bold';
      color: #17C96B; } }


/* Icon preview */


.a-st-iconItem {
    display: inline-block;
    margin: 5px;
    background: #eff2f5;
    padding: 15px 0 0 0;
    height: 15rem;
    width: 154px;
    text-align: center;
    overflow: hidden; }
    .a-st-iconItem .a-st-iconPreview {
      display: block;
      height: 60px;
      margin-top: 0;
      padding-top: 12px; }
    .a-st-iconItem .ai.ai-lg {
      font-size: 3em; }
    .a-st-iconItem a {
      visibility: hidden; }
    .a-st-iconItem:hover {
      background: rgba(0, 0, 0, 0.2);
      transition: 250ms; }
      .a-st-iconItem:hover a {
        visibility: visible;
        top: -50px; }
      .a-st-iconItem:hover span {
        visibility: hidden; }
  
  .a-st-iconLabel {
    margin-top: 5px;
    font-size: 16px; }
    .a-st-iconLabel a {
      font-size: 16px; }


/* expandbold shortcode */
.expandbold {
    padding: 20px;
    background-color: #fafafa;
    margin: 18px 0;
}

/* Component properties list and table */

.adocs-expand .adocs-property-list {
    font-size: 92%;
}

.adocs-property-list h3 {
    border-bottom: 1px solid #BCC7CC;
    padding: 5px 0;
}

.adocs-property-list .copy-to-clipboard {
    display: none;
}

.adocs-property-table .copy-to-clipboard {
    display: none;
}

.adocs-property-table .sub-prop:last-child {
    border-bottom: 1.5px solid #BCC7CC;
}

.adocs-property-table .main-prop {
    border-top: 1.5px solid #BCC7CC;
}

.adocs-property-table .main-prop:last-child {
    border-bottom: 1.5px solid #BCC7CC;
}


/* Anatomy list (numbered) */

.anatomy-list ol {
    margin: 12px 0;
}

.anatomy-list ol li {
    font-size: 92%;
    padding-left: 5%;
    margin-bottom: 6px;
}

.anatomy-list ol li::before, .anatomy-list li::before {
    color: #0062BA;
    border: none;
    height: fit-content;
    /* margin-right: 15px; */
}

/* Code block title */

.code-title {
    position: relative;
    top: 30px;
    background-color:#222;
    padding: 15px;
    padding-top: 0px;
    margin-top: -30px;
    border: 0;
    border-radius: 7px;
    box-shadow: 5px 0 5px rgba(68, 68, 68, 0.6);
}

.code-title code {
    background-color:#222;
    color: #707880;
    border: 0;
    font-size: 75%;
}

.code-title .copy-to-clipboard {
    display: none;
}

/* Code title */

h2 code, h3 code, h4 code {
    color: unset;
    background: none;
    border: none;
}

h4 code {
    font-weight: bold;
}

.expandsmall-header code + .copy-to-clipboard,
h2 code + .copy-to-clipboard,
h3 code + .copy-to-clipboard,
h4 code + .copy-to-clipboard {
display: none;
}

.expandsmall-header code {
    color: unset;
    background: none;
    border: none;
    border-radius: none;
    padding: 0;
    font-size: 88%;
    vertical-align:baseline;
}

/* Clear search */

input[type="search"] {
    border: 1px solid gray;
    padding: .2em .4em;
    border-radius: .2em;
  }
  
  input[type="search"].dark {
    background: #222;
    color: #fff;
  }
  
  input[type="search"].light {
    background: #fff;
    color: #222;
  }
  
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 1em;
    width: 1em;
    border-radius: 50em;
    background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
  }
  
  input[type="search"]:focus::-webkit-search-cancel-button {
    opacity: .3;
    pointer-events: all;
  }
  
  input[type="search"].dark::-webkit-search-cancel-button {
    filter: invert(1);
  }