/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

    /* Style the buttons that are used to open the tab content */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
    }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            background-color: #ccc;
        }

/* Linebreak fixes for webhooks article */
.wh-break code, td {
    word-wrap: break-word;
    word-break: break-word;
}

/* Ny styling af ol li counter */
.hu-article-content ol li::before {
    color: #ffffff;
    border-color: #F79F35;
    background-color: #F79F35;
}

.hu-article-content ol li ol li::before {
    color: #ffffff;
    border-color: #F79F35;
    background-color: #F79F35;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

#graphiql-experimental,
#graphiql {
    height: 640px;
    position: relative;
}

    #graphiql-experimental,
    #graphiql * {
        font-family: "Poppins", times;
    }

.search-box {
    display: flex !important;
    align-items: center !important;
    margin: 0px !important;
    padding: 0px 10px;
    position: sticky !important;
    top: 0px;
    background: white;
}

    .search-box input {
        padding: 1em 0px !important;
        margin-left: 10px;
    }

    .search-box::before {
        position: static !important;
        top: 0px !important;
    }

.doc-explorer-rhs {
    display: none;
}

.docExplorerWrap {
    width: 100% !important;
}

.graphiql-container {
    width: auto !important;
}

.editorWrap, .historyPaneWrap {
    display: none !important;
}

.docExplorerWrap {
    display: block !important;
}

.doc-explorer-title-bar {
    height: auto !important;
}

.doc-explorer-title:not(:first-child) {
    text-align: right !important;
}

.doc-explorer-contents {
    padding-top: 0px !important;
}


/* Recap /seneste-artikler/ */
div.recapsummary {
    clear: left;
}

div.recapdesc {
    display: block;
    clear: both;
}

div.recapnew {
    background-image: url('https://cms105524.sfstatic.io/upload_dir/pics/Generelle-funktioner/ikoner/ny-artikel.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 33px;
    height: 16px;
    display: block;
    float: left;
}

div.recapessential {
    background-image: url('https://cms105524.sfstatic.io/upload_dir/pics/Generelle-funktioner/ikoner/essentiel-artikel.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 84px;
    height: 16px;
    display: block;
    float: left;
}

div.recapupdated {
    background-image: url('https://cms105524.sfstatic.io/upload_dir/pics/Generelle-funktioner/ikoner/opdateret-artikel.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 90px;
    height: 16px;
    display: block;
    float: left;
}

div.recapchanges {
    width: 94px;
    height: 16px;
    display: block;
    float: left;
}

div.recapnew, .recapessential, .recapupdated, .recapchanges, .recapsymboldesc {
    margin-top: 3px;
    margin-right: 5px;
    margin-bottom: 5px;
}

div.o-meter1 {
    background-image: url('https://cms105524.sfstatic.io/upload_dir/pics/Generelle-funktioner/ikoner/change-o-meter1.png');
    background-repeat: no-repeat;
    background-size: cover;
}

div.o-meter2 {
    background-image: url('https://cms105524.sfstatic.io/upload_dir/pics/Generelle-funktioner/ikoner/change-o-meter2.png');
    background-repeat: no-repeat;
    background-size: cover;
}

div.o-meter3 {
    background-image: url('https://cms105524.sfstatic.io/upload_dir/pics/Generelle-funktioner/ikoner/change-o-meter3.png');
    background-repeat: no-repeat;
    background-size: cover;
}

div.o-meter4 {
    background-image: url('https://cms105524.sfstatic.io/upload_dir/pics/Generelle-funktioner/ikoner/change-o-meter4.png');
    background-repeat: no-repeat;
    background-size: cover;
}

div.o-meter5 {
    background-image: url('https://cms105524.sfstatic.io/upload_dir/pics/Generelle-funktioner/ikoner/change-o-meter5.png');
    background-repeat: no-repeat;
    background-size: cover;
}

/* GraphQL API note START */
div.graphqlapi-note {
    max-width: 900px;
    height: auto;
    background-color: #f4f6f8;
    border: 0px;
    border-style: none;
    border-radius: 3px 30px 3px 30px;
    padding: 20px 25px 20px 25px;
}

.graphqlapi-note p {
    margin: 0px;
    color: #707070;
    line-height: 1.25em;
}

.graphqlapi-note strong {
    color: #5e5e5e;
}

.graphqlapi-note p img {
    border-width: 0px;
    border-style: solid;
    width: 19px;
    height: 19px;
}

/* Caption (EN) */
div.graphqlapi-note strong::after {
    content: "PLEASE NOTE:";
}

/* Display text (EN) */
div.graphqlapi-note span::after {
    content: " We are actively working on developing new data types for the API, as indicated under the Roadmap menu item in the left menu. Read what functionality we are adding in the Experimental and Public schema, which you will find in the left menu under Changelog.";
}

/* Caption (DK) */
div.graphqlapi-note strong.gpapidk::after {
    content: "BEM\00C6RK:";
}

/* Display text (DK) */
div.graphqlapi-note span.gpapidk::after {
    content: " Vi arbejder aktivt p\00E5, at udvikle nye datatyper til APIet, som angivet under menupunktet Roadmap i venstremenuen. L\00E6s hvilken funktionalitet vi tilf\00F8jer i Experimental og Public skemaet, som du finder i venstremenuen under Changelog.";
}
/* GraphQL API note END */


/* GraphQL API attention START */
div.graphqlapi-attention {
    max-width: 650px;
    height: auto;
    background-color: #fffaae;
    border: 1px;
    border-style: solid;
    border-color: #f1eda5;
    padding: 20px 20px 20px 20px;
}

.graphqlapi-attention p {
    margin: 0px;
    color: #2b2a1c;
    line-height: 1.25em;
}

.graphqlapi-attention strong {
    color: #2b2a1c;
}

.graphqlapi-attention p img {
    border-width: 0px;
    border-style: solid;
    width: 19px;
    height: 19px;
}

/* Caption (DK) */
div.graphqlapi-attention strong.gpapidk::after {
    content: "BEM\00C6RK:";
}

/* Display text (DK) */
div.graphqlapi-attention span.gpapidk::before {
    content: " For HostedShop g\00E6lder indtil videre f\00F8lgende endpoint:";
}
/* GraphQL API attention END */





/* SF attention START */
div.shopfactory-attention {
    max-width: 825px;
    height: auto;
    background-color: #fffaae;
    border: 1px;
    border-style: solid;
    border-color: #f1eda5;
    padding: 20px 20px 20px 20px;
}

.shopfactory-attention p {
    margin: 0px;
    color: #2b2a1c;
    line-height: 1.25em;
}

.shopfactory-attention strong {
    color: #2b2a1c;
}

.shopfactory-attention p img {
    border-width: 0px;
    border-style: solid;
    width: 19px;
    height: 19px;
}

/* Caption (DK) */
div.shopfactory-attention strong.gpapidk::after {
    content: "BEM\00C6RK:";
}

/* Display text (DK) */
div.shopfactory-attention span.gpapidk::before {
    content: " Er din l\00F8sning placeret p\00E5  vores nye servermilj\00F8  (ShopFactory URL: admin.hostedshop.io) g\00E6lder f\00F8lgende URL:";
}

div.shopfactory-attention span.gpapidk {
    bottom: 0px;
    margin-left: 0px;
}
/* SF attention END */

/* Copy button START */
#copybutton {
    color: #000;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    padding: 8px 16px;
    text-align: center;
    cursor: pointer;
}

    #copybutton:hover {
        background-color: #ccc;
    }

#copybutton2 {
    color: #000;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    padding: 8px 16px;
    text-align: center;
    cursor: pointer;
}

    #copybutton2:hover {
        background-color: #ccc;
    }
/* Copy button END */

/* Copy button tooltip START */
.cpybtntooltip {
    position: relative;
    display: inline-block;
}

.cpybtntrap {
    max-width: 100%;
    display: block;
    text-align: right;
}

.cpybtntooltip .cpybtntooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
}

    .cpybtntooltip .cpybtntooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

.cpybtntooltip:hover .cpybtntooltiptext {
    visibility: visible;
    opacity: 1;
}
/* Copy button END */

/* How-To START */
/* Video iframe mobilefriendly/responsive fix */
.howto-embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

    .howto-embed-container iframe, .howto-embed-container object, .howto-embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

h6.howto {
    font-family: "Poppins", times;
    font-size: 1.5em;
    color: #4e4e4e;
}

    h6.howto::after {
        margin-top: 10px;
        display: block;
        width: 120px;
        height: 2px;
        content: " ";
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-color: #4e4e4e;
        border-bottom-color: #4e4e4e;
    }
 /* How-To END */
 
 /* Heimdal note START */
div.heimdal-note {
    height: auto;
    background-color: #fffaae;
    border: 0px;
    border-style: none;
    border-radius: 3px 30px 3px 30px;
    padding: 20px 25px 20px 25px;
}

.heimdal-note p {
    margin: 0px;
    color: #2b2a1c;
    line-height: 1.25em;
}

.heimdal-note strong {
    color: #2b2a1c;
}

.heimdal-note p img {
    border-width: 0px;
    border-style: solid;
    width: 19px;
    height: 19px;
}

/* Caption (DK) */
div.heimdal-note strong.gpapidk::after {
    content: "BEM\00C6RK:";
}

div.sheimdal-note span.gpapidk {
    bottom: 0px;
    margin-left: 0px;
}
/* Heimdal note END */





/* Heimdal reference START */
div.heimdal-reference {
    width: 100%;
    height: auto;
    margin-top: 25px;
    margin-bottom: 25px;
    
}

div.heimdal-reference div {
    margin: 0 auto; /* float center */
    max-width: 800px;
    height: auto;
    background-color: #F5F4F2;
    border: 1px;
    border-radius: 3px 30px 3px 30px;
    border-style: none;
    color: #212529;
    padding: 20px 20px 20px 20px;
    text-align: center;
    line-height: 1.25em;
}

.heimdal-reference strong {
    color: #2b2a1c;
}

.heimdal-reference img {
    border-width: 0;
    border-style: solid;
    width: 19px;
    height: 19px;
}
/* Heimdal reference END */


/* Article Tips */
.article-tips {padding: 15px 20px 15px 20px !important; background-color:#f7ffad; border-radius: 3px 30px 3px 30px;}


/* Unsupported articles styling */
.alert-unsupported {
    background-color: #fffaae;
    color: #111;
    margin-bottom: 20px;
    padding: 20px 25px 20px 25px;
    border-radius: 3px 30px 3px 30px;
}
.alert-unsupported p {
    font-size: inherit;
    color: inherit;
}
.alert-unsupported a {
    font-size: inherit;
    color: #666;
    text-decoration: underline;
}



/* Popular articles boxes */
div.popular-article  {
    margin: 0 auto; /* float center */
    width: 70%;
    height: auto;
    background-color: #F5F4F2;
    border: 0px;
    border-style: none;
    border-radius: 30px 3px 30px 3px;
    color: #212529;
    padding: 20px 20px 20px 20px;
    text-align: center;
    line-height: 1.25em;
}
/* Popular articles */
.most-popular-articles .popular-article {
  background-color:#F5F4F2;
  border-color:#f1f1f1;
  overflow: hidden;
}

/* Rounded panel borders */
.panel-border {
  border-radius: 30px 3px 30px 3px;
}
.hu-article-content{
    border-radius: 30px 3px 30px 3px;
}
.feedback-section {
border-radius: 30px 3px 30px 3px;
}


/* Section colors */
/* Main page (all 4 themes) */
.frontpage-bg {
  background-color:#c2c2c2 !important;
}
/* Beginners guide */
.beginners-bg {
  background-color:#F2AB60;
}
.beginners-guide
{
    color: #F2AB60 !important;
}
.header-bar-top .item-9.active:after {
  border-color:#F2AB60;
}
.beginners-bg-n2 {
  background-color:#F5BE84;
}

/* User manual */
.manual-bg {
  background-color:#79A0D0;
}
.manual-universe {
    color: #79A0D0 !important;
}
.header-bar-top .item-8.active:after {
  border-color:#79A0D0;
}
.manual-bg-n2 {
  background-color:#9CB9DC;
}
/* Developers guide */
.developers-bg {
  background-color:#7BC6B4;
}
.developers-universe {
    color: #7BC6B4 !important;
}
.header-bar-top .item-6.active:after {
  border-color:#7BC6B4;
}
.developers-bg-n2 {
  background-color:#94D1C2;
}
/* Integrations and apps guide */
.integrations-bg {
  background-color:#DA86A5;
}
.integrations-and-apps {
    color: #DA86A5 !important;
}
.header-bar-top .item-3.active:after {
  border-color:#DA86A5;
}
.integrations-bg-n2 {
  background-color:#E09BB4;
}


/* Rounded images in articles */
article img {

    border-radius: 10px 10px 10px 10px;
}

/* Rounded video frames */
.howto-embed-container iframe {
    border-radius: 30px 3px 30px 3px;
}

/* Rounded TOC floating sidebar (right) */
.toc-sidebar .toc-wrapper div
  {
    background-color: #ffffff !important;
    border-radius: 30px 3px 30px 3px;
  }
.toc-sidebar .toc-wrapper {
  background-color: #ffffff;
  border-radius: 30px 3px 30px 3px;
}







/* Package widget start */
.pckbwidgetcontainer
{
    max-width: 75%;
    min-width: 375px;
    border-style: solid;
    border-width: 1px;
    border-color: #E9E9E9;
    border-radius: 0px 20px 0px 20px;
}
.pckbwidgetlabels
{
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    padding: 10px !important;
}
.pckbwidgetlink
{
    text-decoration: none;
    color: #B7B7B7 !important;
}
.pckbwclickable
{
    cursor: pointer;
    text-decoration: underline;
}
.pckbwtitle
{
  float: left;
  min-width: 150px;
  max-width: 75%;
  font-weight: normal;
  font-size: 2em;
  background-color: #2C4E7E;
  color: #ffffff !important;
  padding: 10px 20px 10px 20px !important;
  border-radius: 20px 2px 20px 2px;
}
.pckbwidgetlabel1
{
    flex: 1 1 100%;
    max-width: 70%;
    padding: 4px !important;
    padding-bottom: 20px !important;
    color: #212529 !important;
}

span.pckbwidgetlabelmark
{
    background-color: #E6723D;
    color: #ffffff !important;
    padding: 3px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    border-radius: 15px 15px 15px 15px;
}

.pckbwidgetlabel2
{
    flex: 1 1 75px;
    padding: 4px !important;
    color: #212529;
    text-align: right;
}
.pckbwidgetlabel2 a
{
    color: #212529 !important;
    text-decoration: underline;
}
.pckbwidgetlabel2 a:hover
{
    color: #212529 !important;
}

.pckbwidgets {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    padding: 10px !important;
}
.pckbwidgets>* {
    flex: 1 1 120px;
    padding: 4px !important;
    padding-left: 10px !important;
    border-style: solid;
    border-width: 2px;
    border-color: #E9E9E9;
    background-color: #E9E9E9;
    border-radius: 30px;
    color: #B7B7B7 !important;
    cursor: default;
    margin-top: 3px !important;
}
/* Add left margin to all but the first child within the widgets div */
.pckbwidgets>*:not(:first-child) {

    margin-left: 3px !important;
}
.pckbactive
{
    /*  E6723D, E6723D, 212529 */
    background-color: #212529;
    border-color: #212529;
    color: #ffffff !important;
    cursor: pointer;
}
.pckbactive:hover
{
    background-color: #E6723D;
    border-color: #E6723D;
    color: #ffffff !important;
    transition: 0.3s;
    cursor: pointer;
}
.pckbactive .pckbwidgetlink
{
    text-decoration: none;
    color: #ffffff !important;
}
/* Insert checkmark */
.pckbactive::before {
    content:    "\2714\00A0";
}
/* Package widget end */




/* Pop-up widget start */
.pckbwidgetpopup {
  display: none;
  position: fixed;
  padding: 15px !important;
  width: 50%;
  left: 25%;
  height: 70%;
  top: 12%;
  background: #FFF;
  border-radius: 10px 10px 10px 10px;
  z-index: 9999;
    -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
}

@media only screen and (max-width: 600px) {
  .pckbwidgetpopup {
    width: 90%;
    left: 5%;
    padding: 5 !important;
  }
}

.pckbwidgetpopupsmall
{
  width: 40%;
  left: 30%;
  height: 66%;
  top: 14%;
}

@media only screen and (max-width: 600px) {
  .pckbwidgetpopupsmall {
    width: 90%;
    left: 5%;
    padding: 5 !important;
  }
}

.pckbwidgetpopclosecontainer
{
  display: block;
  width: 100%;
  height: 80px;
}
.pckbwidgetpopclose
{
  background-color: #212529;
  float: right;
  width: 40px;
  height: 40px;
  border-style: none;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
  font-family: monospace;
  font-weight: bold;
  text-decoration: none;
  font-size: 32px;
  line-height: 36px !important;
  color: #ffffff !important;
}

.pckbwidgetpopclose:hover
{
    background-color: #E6723D;
    transition: 0.3s;
    cursor: pointer;
}
span.pckbwaction
{
    cursor: pointer;
    background-color: #E6723D;
    color: #ffffff !important;
    font-weight: bold;
    padding: 3px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    border-radius: 15px 15px 15px 15px;
}
span.pckbwaction:hover
{
    cursor: pointer;
    background-color: #212529;
    color: #ffffff !important;
}
.pckbwidgetpopcontent
{
  padding-top: 8px !important;
  padding-left: 15px !important;
  display:block;
  overflow-y: auto;
  overflow-x: hidden;
  height: 85%;
}
.pckbwidgetpopcontent img
{
    width: 90%;
    height: auto;
    border-style: solid;
    border-color: #ededed;
    border-width: 1px;
    border-radius: 5px !important;
}
.pckbwpoppackagetitle
{
  float: left;
  min-width: 150px;
  font-weight: normal;
  font-size: 2em;
  background-color: #2C4E7E;
  color: #ffffff !important;
  padding: 10px 20px 10px 20px !important;
  border-radius: 20px 2px 20px 2px;
}
/* Pop-up widget end */




/*
Begynderguide: #F2AB60
Brugermanual: #79A0D0
For udviklere: #7BC6B4
Integrationer og apps: #DA86A5

Icon shades:
#B5B1A5 <- Dark
#D9D7D0 <- Medium
#FFFFFF <- Bright
#F9D8B4 <- Special (beginners guide)

Page background:
#f1f1f1
*/