:root {

    --ig-status-text-color: #357ebd; /* 1. IG Title and status text color */
    --navbar-bg-color: #ffffff; /* 2. Header container color */
    --footer-bg-color: #ffffff; /* 3. Footer background color*/
    --footer-container-bg-color: #f2f3f7; /* 4. Footer container color */
    --stripe-bg-color: #ffffff; /* 5. Header strip color */

    --btn-hover-color: #adadad;  /* 6. Menu button hover color */
    --btn-active-color: #2b2b2b; /* 7. Menu button active color */
    --btn-text-color: #333333; /* 8. Menu button text color */
    --btn-gradient-start-color: #428bca; /* 9. Menu item gradient start color */
    --btn-gradient-end-color: #357ebd; /* 10. Menu item gradient end  color */
    --btn-gradient-start-color-alpha: #ff428bca; /* 11. Menu item gradient start color (with alpha) */
    --btn-gradient-end-color-alpha: #ff357ebd; /* 12. Menu item gradient end color (with alpha) */
    --link-color: #428bca; /* 13. Hyperlink text color */
    --link-hover-color: #2a6496; /* 14. Hyperlink text hover color */

    --publish-box-bg-color: #d6ecff; /* 15. Publish box background color */
    --publish-box-border: 1px solid #dcdcdc; /* 16.  Publish box border definition */

    --toc-box-bg-color: #fffdf0; /* 17.  TOC box background color */
    --toc-box-border: 1px solid #dcdcdc; /* 18. TOC box border definition */

    --stu-note-background-color: #fff2ff; /* 19. (STU) Note box background color */
    --stu-note-border-left-color: #ffa0ff; /* 20. (STU) Note box border color */

    --ig-header-color: #ffffff; /* 21. Header color (sides) */
    --ig-header-container-color: #ffffff; /* 22. Header container color (center) */
    --footer-nav-bg-color: #adadad; /* 23. Footer navigation background color*/

    --footer-text-color: #2c2c2c; /* 24. Footer highlight font color */
    --footer-hyperlink-text-color: #333b43; /* 25. Footer hyperlinks font color */
    --footer-highlight-text-color: #2a2a2b; /* 26. Footer highlight font color */

    --breadcrumb-bg-color: #f5f5f5; /* 27. Breadcrumb font color */
    --breadcrumb-text-color: ##555555; /* 28. Breadcrumb font color */

    --dragon-background-color: #fffbf7; /* 29. Dragon background color */
    --dragon-text-color: #101020; /* 30. Dragon font color */

}

#ig-status {
    text-align: left;
    margin-top: 5px;
}

.legend {
    font-size: 12px;
}

.breadcrumb {
    margin-top: -5px;
}

table {
    width: 100%;
}

table th {
    background: #d6ecff;
    padding: 4px;
}

table tr:nth-child(even) {
    background: #EEE;
}

table tr:nth-child(odd) {
    background: #FFF;
}

table td {
    padding: 4px;

}

table.release-notes td {
    max-width: 650px;
}

table td.bibliography-key {
    max-width: 350px;
}

table td.bibliography-desc {
    max-width: 700px
}

@media (max-width: 768px) {
    table td {
        max-width: 120px;
        min-width: 80px;
    }
    
    table.colsd td {
        max-width: 180px;
        min-width: 80px;
    }

    table td.bibliography-key {
        max-width: 120px;
        min-width: 80px;
    }
    table td.bibliography-desc {
        max-width: 120px;
        min-width: 80px;
    }
}

.no-stripe tr:nth-child(even),
.no-stripe tr:nth-child(odd) {
    background: inherit !important;
}

pre {
    overflow: auto;
}

.navbar {
    border-bottom: 1px solid #0A0008;
}

.navbar-toggle {
    background-color: rgba(51, 51, 51, 0.5);
    border-color: rgba(51, 51, 51, 0.5);
}

.navbar-inverse .navbar-toggle {
    border-color: rgba(51, 51, 51, 0.5);
}

#gem-ig-logo {
    float: left;
    margin-left: 6px;
    width: 400px;
    padding: 25px;
}

#gem-ig-headline {
    min-height: 200px;
    max-height: 230px;
    width: 50%;
    overflow: hidden;
    background: #010e52;
    padding: 40px;
    margin: 40px;
}

.gem-ig-headline-container {
    background: #ffffff;
    height: 280px;
}

@media (max-width: 995px) {
    .gem-ig-headline-container {
        height: 180px;
    }
    #gem-ig-logo {
        margin-left: 6px;
        width: 100%;
        padding: 10px;
    }

    #gem-ig-headline {
        width: 50%;
        padding: 20px;
        margin: 10px;
        min-height: 120px;
        max-height: 160px;
    }
}

@media (max-width: 768px) {
    #gem-ig-logo {
        margin-left: 6px;
        width: 100%;
        padding: 10px;
    }

    #gem-ig-headline {
        width: 100%;
        padding: 20px;
        margin: 0px;
        min-height: 100px;
        max-height: 140px;
    }

    .gem-ig-headline-container {
        height: 150px;
        background: #010e52;
    }
}


#gem-ig-headline .gem-ig-headline-title {
    font-family: euclid-bold, sans-serif;
    line-height: 1.125;
    font-size: 20pt;
    font-weight: bold;
    color: #00ff65 !important;
    padding-bottom: 10px;
  }
  
#gem-ig-headline .gem-ig-headline-subtitle {
    font-family: euclid-regular, sans-serif;
    font-weight: 400;
    line-height: 1.25;
    font-size: 18px;
    color: #FFFFFF !important;
  }


.gem-ig-svg-container {
    width: var(--box-width, 100%); /* Passt die Breite des Containers an */
    height: auto; /* Proportional zur Breite */
    border: 1px solid rgba(66, 139, 202, 0.3);
}

@media (max-width: 768px) {
    .gem-ig-svg-container  {
        width: var(--box-width-mobile, 100%);
    }
}

.gem-ig-svg-downloadlink-wrapper {
    text-align: right;
    height: 30px;
    margin-bottom: -5px;
    margin-right: -1px;
}

.gem-ig-img-container {
    width: var(--box-width, 100%); /* Passt die Breite des Containers an */
    height: auto; /* Proportional zur Breite */
    padding: 10px;
    /* border: 1px solid rgba(66, 139, 202, 0.3); */
}

@media (max-width: 768px) {
    .gem-ig-img-container  {
        width: var(--box-width-mobile, 100%);
    }
}

.gem-ig-img-downloadlink-wrapper {
    text-align: right;
    height: 30px;
    margin-bottom: -15px;
    margin-right: -11px;
}


a.gem-ig-download-btn {
    /* background-color: #d6ecff; */
    border: 1px solid rgba(66, 139, 202, 0.3);
    padding: 7px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 2px;
    text-decoration: none;
}

a.gem-ig-download-btn:hover {
    background-color: #98c7f7;
}


.gem-ig-list table {
    width: 100%;
}

.gem-ig-list table tr td {
    border-bottom: 1px solid rgba(192, 192, 192, 0.2);
    border-spacing: 0;
}

.gem-ig-example {
    display: none; 
}
.gem-ig-example-wrapper {
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(192, 192, 192, 0.2);
    border-spacing: 0;
}

.gem-ig-example-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.gem-ig-example-title {
    min-width: 200px;
    margin: 0; 
    cursor: pointer;
}

.gem-ig-example-toggle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    font-size: 18px;
    display: flex; 
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.2s; 
}

.gem-ig-example-toggle:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.gem-ig-example-content {
    display: none; 
    margin-top: 10px;
    width: 100%;
}
