/*Master CSS*/
        :root {
        --grey:#f5f5f5;
        --grey-hover:#f1f1f1;
        }


        
        html {background:#e8e6df; scroll-behavior: smooth;}
        body {margin:0px;line-height:160%!important; background:white;}
        
        .grid-1
         {display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin-top: 1.2rem;margin-bottom: 1.2rem}
        
        .grid-2
         {display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 1.2rem;margin-bottom: 1.2rem}
        
        .grid-3
         {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.6rem; margin-top: 1.2rem;margin-bottom: 1.2rem}
        
        .grid-4
         {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0.6rem; margin-top: 1.2rem;margin-bottom: 1.2rem}
        
        .grid-5 
        {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 0.6rem; margin-top: 1.2rem;margin-bottom: 1.2rem}
     
        .grid-docbody
        {display: grid; grid-template-columns: 20% auto 20%; gap: 2rem; margin-top: 1.2rem;margin-bottom: 1.2rem }
        

        
        .homepage {margin-top:1.2rem}
        .homepage h3 {width:70%;}
        
        /*Navigation bar and logo*/
        .navigation {width: 100%;height: 51px;background: #f9f9f9; border-bottom:1px solid #eeeeee;}
        .top-menu{display: grid; grid-template-columns: 152px auto 85px; margin-block-start:0px!important;} 
        .menu {display: inline-flex;height: 50px;place-items: center;padding: 0px 12px 0px 12px;font-size: 0.8rem;gap: 1rem}
        .sign-in {text-align: right;align-self: center; font-size: 0.8rem; color:#0078d4;}
    
        /*Footer*/
        footer {bottom: 0px; background:#0f2337; padding:3rem;width:100%;}
        footer p, footer a {color:white; text-decoration:none;}
         
        
        /*Documentation*/
        ul.breadcrumb {font-size: 0.8rem; display:flex; padding-left:0px;}
        ul.breadcrumb > li{list-style-type:none!Important;}
        #doc-page {min-height:72rem;}
        #doc-page input {width:100%; padding-line-start:2rem; margin-bottom:2rem}
        #doc-page .next-previous-buttons {margin-bottom:1rem; display:grid; height:5rem; grid-template-columns: 1fr 1fr; gap: 0.4rem;}
        #doc-page .next-previous-buttons a.previous, #doc-page .next-previous-buttons a.next  {display: grid; place-items:center;text-align: center;border: 1px solid #e6e6e6;background: #fcfbfb; text-decoration: none;color: #5e5e5e; transition:all 0.3s}
        #doc-page .next-previous-buttons a.previous:hover, #doc-page .next-previous-buttons a.next:hover {border:1px solid #cacaca; background:#f5f5f5;transition:all 0.3s} 
        a.next::after {
        }
       .doc-actions {text-align: right;margin-bottom: 0.6rem}
        p.Article {padding-top:1.5rem;}
        
        .smartapp-doc-body ul > li {list-style-type:disc!important;}
        
        ul.in-this-article {border-left: 1px solid #e2e2e2;padding-left: 16px;}
        ul.in-this-article a {text-decoration:none;}
        ul.in-this-article a:hover {background:#e5e5e5;}
        
        ul > li {list-style-type:none}
        
        .doc-content {margin-bottom:2rem;}
        .doc-content:last-child  {margin-bottom: 2rem;}
        .image-container img {max-width:100%;padding: 1rem;background: #f8f8f8;}
        .doc-content .image-container { position: relative;display: inline-block; width:100%}
        .doc-content h3 {display:flex; font-weight:700}
        .doc-content table {border:1px solid #e5e5e5}
        .first-doc > h3  {font-size:3rem!important; font-weight:bold}
        .doc-content h3:hover > a.copy-link {display:block!important;position: relative; top: 0px; left: 0px; float: right;}
        .doc-content h4 {font-size:1.5rem!important; font-weight:bold}
        .doc-content h3 > a.copy-link {display:none;}
        .doc-content H3 > a {color:#e0e0e0;}
        .doc-content ul > li {list-style-type:disc!important;}
        .doc-body ul > li {list-style-type:disc}
       
       /*Documentation right*/
       .doc-right {position:sticky; top:50px;}
        .subchapters {border:1px solid #e1e1e1; border-radius:3px; max-height: 90vh; overflow: scroll;}
        .subchapters p {padding:0.5rem 1rem 0.5rem 1rem; background:#e6e6e6;}
        .subchapters ul {padding:0rem 0rem 0rem 0rem}
        .subchapters ul li {margin-bottom:0.6rem; font-size:0.8rem; display:flex;}
        .subchapters li.active a{border-bottom: 2px solid white;color: black;}
        .doc-sub-menu a.active {background: #e6e6e6; text-decoration: none; transition: all 1s}
        .doc-sub-menu a {margin:0rem 1rem; transition: all 1s; text-decoration:none;}
        .doc-sub-menu a:hover {text-decoration:underline;}
        .subchapters ul li:last-child {margin-bottom:2rem; }
        li.moveright    {position: relative; left: 24px;}
        
        
        a.appsource {padding: 1rem; margin-bottom: 1rem; background: #0093dd; color: white; text-decoration: auto; max-width: 100%; width: 100%;display: block; text-align: center; opacity:0.9;font-size:0.8rem;}
        a.appsource:hover {opacity:1;}
        .iconappsource {padding-right:3px; position:relative;top:-1px;}
        
        /*Documentation Sub Menu*/
        .doc-menu {font-size: .875rem; padding-inline-start:0px; padding: 0px;position:sticky;top: 50px;}
        .doc-menu a {padding-top: 2px;padding-bottom: 2px; display: block; color:#313131;text-decoration:none;}
        .doclevel-3 li:hover, .doc-menu p:hover {text-decoration: underline;}
        .doclevel-3 li.Active {background:#e6e6e6; font-weight:700}
        .doc-menu {padding-left:0px}
        li.doclevel-2 p {margin:0px;}
        li.doclevel-2:hover {cursor:pointer}
        ul.doclevel-1{padding-left:0px; padding-top:0rem;padding-bottom:0.2rem}
        ul.doclevel-2{padding-left:1.2rem;}
        ul.doclevel-3{padding-left:2rem;}
        ul.doclevel-3 li:hover a {text-decoration:underline;}
        .active.doclevel-3 {display:block!important}
        .doclevel-3 {display:none;   margin-top: 0px}
        .doclevel-3 li {padding:0px 0px 0px 12px;}
        .doc-menu li > ul {list-style: none; padding-left: 20px;}
        .doc-menu li.active > ul  {display: block;}
        .doc-menu li. p span svg {transform:rotate(0deg)}
        .doc-menu li.active p span svg {transform:rotate(90deg);}
        
        
        /*Documentation Doc-note*/
        .doc-note {border-radius: 0.375rem; padding: 1rem; margin-bottom:1.5rem; margin-top:1.5rem}
        .doc-note li {list-style-type: disc;}
        .alert-info {display:block}
        .alert-info-content {background:#ffde7a; padding:3rem; margin-top:2rem;1rem solid #ffcd36; width:100%}
         p.alert-title {font-weight:bold;}
        .important {Background:#d7eaf8}
        .note {Background:#efd9fd}
        .tip {Background: #dff6dd}
        .warning {Background:#f8d7da}
        
        /*Documentation Language*/
        .Select-language {margin-bottom:1rem;}
        
        /*Alerts homepage*/
        .alert-info {display:grid;place-items:center;}
        .alert-info-content {background:#ffde7a; padding:3rem; margin-top:1.5rem;border-left:1rem solid #ffcd36}
     
        
        /* SMARTapps homepage*/
        
        #SMARTapp {
        background: var(--grey);
        width: 100%;
        padding: 1rem;
        transition: all 0.5s;
        position: relative;
        overflow: hidden;
        min-height:7rem;
            }
        #SMARTapp.comingsoon {opacity:0.5}
            
        #SMARTapp p {margin-bottom:2.5rem;}
        #SMARTapp:hover {
        background:var(--grey-hover);
        box-shadow:0.5rem 0.5rem 0px #e4e4e4;
        }
        #SMARTapp a {
            position: absolute;
            bottom: 0px;
            left: 0px;
            margin-left: 1rem;
            margin-bottom: 1rem;
            display: inline-table;
            background: #009688;
            padding: 0.2rem 0.6rem 0.2rem 0.6rem;
            color: white;
            text-decoration:none;
        }  
        
        .comming-soon
        {position: absolute;right: -113px; top: 22px; background: #cecece;transform: rotate(45deg);width: 300px;text-align: center; font-size: 0.8rem;) }
        
/* Image popup */

        .image-container {
            position: relative;
            outline:0px solid white;
            transition: all 0.3s;
        }
        
        span.image-hover-text {
            display:flex;
            padding:3px 6px 3px 6px;
            opacity:0.3;
            position: absolute;
            top: 0px;
            right: 0px;
            background: #e6e6e6;
            transition: all 0.3s;
        }
        
        .image-wrapper {
            position:relative;
            overflow:hidden;
        }
         
        
        .image-container:hover {outline: 1px solid #e6e6e6;}
        .image-container:hover > span.image-hover-text {background:#a9a9a9}

        .image-link {
            display: block;
        }

        .popup-container {
         padding:2rem;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:rgb(204 204 204 / 70%);
            justify-content: center;
            align-items: center;
            z-index:9999;
        }

        .popup-content {
            max-width: 100%;
            max-height: 100%;
            overflow: hidden;
            background: #f4f4f4;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            text-align: center;
            position: relative;
            padding:1rem;
        }

        .popup-content img {
            width: 100%;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            font-size: 20px;
            color: #000;
            text-decoration: none;
        }
        
        span.img-focus-point
        {
            position: absolute;
            border: 4px solid #ffa4a4;
            border-radius: 6px;
            transition: border 0.3s ease;
        }
        
        .focus-point-hover, span.img-focus-point:hover {
            border:solid 4px red!important;
                box-shadow: 5px 5px 12px #afafaf;
        }
        
         .focus-point-hover > .dot, span.img-focus-point:hover > .dot {
            background:red!important;
        }
        
         .focus-point-text {
            text-decoration:underline;
        }
        
        strong[data-target]:hover {cursor:pointer;  text-decoration:underline;}
        
        .dot {
        height: 25px;
        width: 25px;
        background-color: #fcacac;
        border-radius: 50%;
        display: grid;
        place-content: center;
        transform: translate(-15px, -15px);
        color: white;
        border: 4px solid #fed9d9;
        font-size:0.7rem;
        }
        
        
        
    
        
/*End */

/* Lanugage dropddown*/

 .language-dropdown {
   display: inline-grid!important;
    place-content: end!important;
    position:relative;
    }

.language-dropdown svg {color:#3c3c3c;
    
}

    .dropdown-button {
      background-color: #4CAF50;
      color: red;
      padding: 10px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }

    .dropdown-content {
    display: grid;
    background: white;
    z-index: 99;
    left: -108px;
    padding: 1rem;
    border: 1px solid #e1e1e1;
    text-align: left;
    
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {
      background-color: #f1f1f1;
    }
    
    #dropdowButton {border: none;
    background: white;}
    
    
    /* News and Plannes*/
    .newsandplanned-header {display:grid; grid-template-columns:11fr 1fr}
    .release {outline: 1px solid #eaeaea;padding: 1rem 2rem 1rem 2rem;margin-bottom:1rem; transition:all 0.3s}
    .release:hover {cursor:pointer; box-shadow:5px 5px 8px #e2dede;transition:all 0.5s}
    .Released {border-left:10px solid #add9ac;}
    .Released:hover {border-left:10px solid #9dc89c}
    .Planned {border-left:10px solid #c4ddf3}
    .Planned:hover {border-left:10px solid #c4ddf3}
    .release .topline {display: grid; grid-template-columns: auto 3rem;}
    .releaseinfo {padding-top:0rem}
    .releaseinfo p {margin:0;}
    .release.active > * span > span.icon {transform:rotateZ(0deg);transition:all 0.3s;}
    .release.active > * .topline {position: sticky;top: 0px; z-index:9999;background:white; border-bottom:1px solid #ececec}
    .topline span > span.icon {transform:rotateZ(-180deg);transition:all 0.3s;}
    .topline span {place-self:center; justify-self:right;}
    .topline:hover span {color:blue;transition:all 0.3s}
    .topline h2 {font-weight:bold;}
    .feature {margin-bottom:0rem;}
    .type-new {background: #ccddcc; padding: 0px 5px 0px 5px;}
    .type-bugfix {background: red; padding: 0px 5px 0px 5px;}
    .release > .features {display:none;}
    .release.active > .features {display:block;}
    a.feature {z-index: 9;font-weight: bold; position: sticky; top: 0px;background: white; display:block}
    
    .topline h2 a.copy-link {display:none}
    .topline h2:hover > a.copy-link {display:contents!important;position: relative; top: 0; left: 0px; float: right; color:#dbdbdb; cursor:hand}
    
    /* Service status*/
    .servicestatusoverview {
        margin: 2rem 0rem 2rem 0rem
    }
    
     .header {
       border-left: 1rem solid #cbcbcb;
    height: 3.5em;
    background: #e9e9e9 display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 0rem;
    padding: 1rem;
    font-weight: bold;
    background: #ececec;
    display: grid;  
    margin-bottom:0.2rem;
    }
        
     .issue {
        background: #f9f9f9;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 0rem;
        padding: 1rem;
        height:6rem;
        overflow:hidden;
        margin-bottom:0.2rem;
     }
     .issue a {display:contents;color:black}
     .issue p {display:flex; margin-bottom:0px}
     .issue span {display:inline-flex;color:white}
     .issue span.Information {background:#e0c145}
     .issue span.Error {background:#ff9e9e}
     .issue span.Resolved {background:#8cbe8c}
    .issue.Error {background:#ffe5e5; border-left:1rem solid #ff9e9e;}
    .issue.Resolved {border-left:1rem solid #8cbe8c;}
    .issue.Information {background: #fff1ba !important;border-left:1rem solid #ffe57e;}
    .t-issue {background:#f9f9f9}
    .t-issue .wrapper {padding: 2rem;
    grid-template-columns: 4rem 1fr 4rem;
    display: grid;
    border: 1px solid #ffffff;
    background: white;
    grid-template-rows: 20rem 1fr 1fr;}
    
    .t-issue img { grid-column: 1 / end; grid-row: 1 / end; max-height: 40rem;}
    .content {grid-column: 2 / 3;
    background: white;
    grid-row: 2 / end;
    position: relative;padding:2rem}
    .issue-updates { border-left: 7px solid #dbd9d9;
    background: #f5f5f5;
    padding: 1rem 0rem 0.1rem 1rem;margin-bottom:0.2rem}