/*Uses all styles from ./content/assets/css/ig.gematik.css but uses mio42 coperate colours for headline instead.*/

:root {
  --ig-status-text-color: #357ebd;
  --navbar-bg-color: #fff;
  --footer-bg-color: #fff;
  --footer-container-bg-color: #f2f3f7;
  --stripe-bg-color: #fff;
  --btn-hover-color: #adadad;
  --btn-active-color: #2b2b2b;
  --btn-text-color: #333;
  --btn-gradient-start-color: #428bca;
  --btn-gradient-end-color: #357ebd;
  --btn-gradient-start-color-alpha: #ff428bca;
  --btn-gradient-end-color-alpha: #ff357ebd;
  --link-color: #428bca;
  --link-hover-color: #2a6496;
  --publish-box-bg-color: #d6ecff;
  --publish-box-border: 1px solid #dcdcdc;
  --toc-box-bg-color: #fffdf0;
  --toc-box-border: 1px solid #dcdcdc;
  --stu-note-background-color: #fff2ff;
  --stu-note-border-left-color: #ffa0ff;
  --ig-header-color: #fff;
  --ig-header-container-color: #fff;
  --footer-nav-bg-color: #adadad;
  --footer-text-color: #2c2c2c;
  --footer-hyperlink-text-color: #333b43;
  --footer-highlight-text-color: #2a2a2b;
  --breadcrumb-bg-color: #f5f5f5;
  --breadcrumb-text-color: ##555555;
  --dragon-background-color: #fffbf7;
  --dragon-text-color: #101020
}

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

.legend {
  font-size: 12px
}

.breadcrumb {
  margin-top: -5px
}

table {
  width: 100%
}

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

table tr:nth-child(2n) {
  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-desc,
  table td.bibliography-key {
    max-width: 120px;
    min-width: 80px
  }
}

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

.no-stripe th {
  border-bottom: 1px solid #d6ecff;
  border-left: 1px solid #d6ecff;
  border-right: 0
}

.no-stripe tr>th:last-child {
  border-right: 1px solid #d6ecff
}

.no-stripe td {
  border-bottom: 1px solid #d6ecff;
  border-left: 1px solid #d6ecff;
  border-right: 0
}

.no-stripe tr>td:last-child {
  border-right: 1px solid #d6ecff
}

.release-notes tbody td {
  border-bottom: 0;
  border-left: 0;
  border-right: 0
}

.release-notes tbody tr>td:last-child {
  border-right: 0
}

pre {
  overflow: auto
}

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

.navbar-toggle {
  background-color: rgba(51, 51, 51, .5)
}

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

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

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

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

@media (max-width:995px) {
  .gem-ig-headline-container {
    height: 180px
  }

  #gem-ig-logo {
    margin-left: 6px;
    padding: 10px;
    width: 100%
  }

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

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

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

  .gem-ig-headline-container {
    background: #385C6B;
    height: 140px
  }
}

#gem-ig-headline .gem-ig-headline-title {
  color: #FFCC00 !important;
  font-family: euclid-bold, sans-serif;
  font-size: 20pt;
  font-weight: 700;
  line-height: 1.125;
  padding-bottom: 10px
}

#gem-ig-headline .gem-ig-headline-subtitle {
  color: #fff !important;
  font-family: euclid-regular, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25
}

.gem-ig-svg-container {
  border: 1px solid rgba(66, 139, 202, .3);
  height: auto;
  width: var(--box-width, 100%)
}

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

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

.gem-ig-img-container {
  height: auto;
  padding: 10px;
  width: var(--box-width, 100%)
}

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

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

a.gem-ig-download-btn {
  border: 1px solid rgba(66, 139, 202, .3);
  border-radius: 2px;
  cursor: pointer;
  font-size: 12px;
  padding: 7px;
  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 hsla(0, 0%, 75%, .2);
  border-spacing: 0
}

.gem-ig-example {
  display: none
}

.gem-ig-example-wrapper {
  border-bottom: 1px solid hsla(0, 0%, 75%, .2);
  border-spacing: 0;
  margin-bottom: 20px;
  width: 100%
}

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

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

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

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

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

a[href$=".yaml"]:not([no-download^=true]):after {
  content: url(../images/download.png);
  display: inline-block;
  padding-left: 3px;
  text-decoration: none
}

.gem-ig-user-table {
  border: 1px solid #000;
  width: 330px
}

.gem-ig-badge {
  border-radius: 3px;
  padding: 3px 7px !important
}

.gem-ig-badge-bg-orange {
  background-color: #f5cd47
}

.gem-ig-badge-bg-grey {
  background-color: #a0adbd
}

.gem-ig-badge-bg-green {
  background-color: #51cb9a
}

.gem-ig-badge-bg-blue {
  background-color: #5898fc
}

.gem-ig-badge-bg-red {
  background-color: #f8716e
}

.gem-ig-badge-bg-darkblue {
  background-color: #3e6f8f
}