:root {
  --ak-font-family: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', sans-serif;
  --ak-font-size: 16px;
  --ak-table-font-size: 16px;
  --ak-icon-chevron-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --ak-icon-search-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E")
}

:root:not([data-theme=dark]),
[data-theme=light] {
  --ak-table-header-background-color: hsl(210, 13%, 50%);
  --ak-table-header-border-color: hsl(210, 13%, 50%);
  --ak-table-header-color: hsl(210, 13%, 95%);
  --ak-table-background-color: #fff;
  --ak-table-border-color: hsl(210, 13%, 80%);
  --inner-shadow-color: hsl(210, 13%, 60%);
  color-scheme: light;
  --ak-bg-hover-overlay: #645a500d;
  --ak-bg-hover-effect: brightness(95%);
  --ak-muted-color: hsl(210, 13%, 60%);
  --ak-color: hsl(205, 20%, 32%);
  --ak-secondary: hsl(205, 15%, 41%);
  --ak-secondary-hover: hsl(205, 20%, 32%);
  --ak-secondary-focus: #596b7820;
  --ak-secondary-inverse: #fff;
  --ak-form-bg-color: hsl(210, 13%, 95%);
  --ak-service-color-encrypted: #8b0000;
  --ak-service-color-radio: #4682b4;
  --ak-search-background: #ff0;
  --ak-lightgrey-border: hsl(210, 13%, 90%);
  --ak-lightgrey-color: hsl(210, 13%, 65%);
  --ak-lightgrey-border-pushed: hsl(210, 13%, 55%);
  --ak-lightgrey-color-pushed: hsl(210, 13%, 35%);
  --ak-lightgrey-background: hsl(210, 13%, 99%);
  --ak-lightgrey-background-pushed: hsl(210, 13%, 90%);
  --ak-icon-follow-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#a2afb9' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14,5 L4,5 L4,20 L19,20 L19,10 M12,12 L22,2 M17,2 L22,2 L 22,7' /%3E%3C/svg%3E")
}

@media only screen and (prefers-color-scheme:dark) {
  :root:not([data-theme]) {
    --ak-table-header-background-color: hsl(210, 13%, 20%);
    --ak-table-header-border-color: hsl(210, 13%, 30%);
    --ak-table-header-color: hsl(210, 13%, 50%);
    --ak-table-background-color: var(--background-color);
    --ak-table-border-color: hsl(210, 13%, 25%);
    --inner-shadow-color: hsl(210, 13%, 7%);
    color-scheme: dark;
    --ak-bg-hover-overlay: #faf0f00d;
    --ak-bg-hover-effect: brightness(105%);
    --ak-muted-color: hsl(210, 13%, 40%);
    --ak-color: hsl(205, 16%, 77%);
    --ak-secondary: hsl(205, 15%, 41%);
    --ak-secondary-hover: hsl(205, 10%, 50%);
    --ak-secondary-focus: #73828c40;
    --ak-secondary-inverse: #fff;
    --ak-form-bg-color: hsl(210, 13%, 15%);
    --ak-service-color-encrypted: hsl(0, 20%, 60%);
    --ak-service-color-radio: #4682b4;
    --ak-search-background: #ff03;
    --ak-lightgrey-border: hsl(210, 13%, 20%);
    --ak-lightgrey-color: hsl(210, 13%, 40%);
    --ak-lightgrey-border-pushed: hsl(210, 13%, 30%);
    --ak-lightgrey-color-pushed: hsl(210, 13%, 55%);
    --ak-lightgrey-background-pushed: hsl(210, 13%, 20%);
    --ak-icon-follow-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#415360' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14,5 L4,5 L4,20 L19,20 L19,10 M12,12 L22,2 M17,2 L22,2 L 22,7' /%3E%3C/svg%3E")
  }
}

[data-theme=dark] {
  --ak-table-header-background-color: hsl(210, 13%, 20%);
  --ak-table-header-border-color: hsl(210, 13%, 30%);
  --ak-table-header-color: hsl(210, 13%, 50%);
  --ak-table-background-color: var(--background-color);
  --ak-table-border-color: hsl(210, 13%, 25%);
  --inner-shadow-color: hsl(210, 13%, 7%);
  color-scheme: dark;
  --ak-bg-hover-overlay: #faf0f00d;
  --ak-bg-hover-effect: brightness(105%);
  --ak-muted-color: hsl(210, 13%, 40%);
  --ak-color: hsl(205, 16%, 77%);
  --ak-secondary: hsl(205, 15%, 41%);
  --ak-secondary-hover: hsl(205, 10%, 50%);
  --ak-secondary-focus: #73828c40;
  --ak-secondary-inverse: #fff;
  --ak-form-bg-color: hsl(210, 13%, 15%);
  --ak-service-color-encrypted: hsl(0, 20%, 60%);
  --ak-service-color-radio: #4682b4;
  --ak-search-background: #ff03;
  --ak-lightgrey-border: hsl(210, 13%, 20%);
  --ak-lightgrey-color: hsl(210, 13%, 40%);
  --ak-lightgrey-border-pushed: hsl(210, 13%, 30%);
  --ak-lightgrey-color-pushed: hsl(210, 13%, 55%);
  --ak-lightgrey-background-pushed: hsl(210, 13%, 20%);
  --ak-icon-follow-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#415360' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14,5 L4,5 L4,20 L19,20 L19,10 M12,12 L22,2 M17,2 L22,2 L 22,7' /%3E%3C/svg%3E")
}

/****************************************/
/*** height of sticky header
/***************************************/
@media (min-width:768px) {
  html {
    scroll-padding-top: 3rem;
  }
}

html,
body {
  font-family: var(--ak-font-family);
  font-size: var(--font-size, 16px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

body {
  margin: 0;
  padding: 0
}

*,
::before,
::after {
  box-sizing: border-box
}

.hidden {
  display: none
}

.smoothed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

a {
  text-underline-offset: .25em
}

:disabled,
.disabled,
:disabled *,
.disabled * {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none
}

.tabpage {
  margin: 0;
  /* min-height: calc(100vh - 50px); */
  padding: 2rem 1rem
}

.tabpage-description {
  font-weight: 400;
  max-width: 42em;
  word-break: keep-all;
  overflow-x: hidden
}

.w900 {
  max-width: calc(50em + 2px)
}

.w200 {
  max-width: 11em
}

@media (min-width:576px) {
  :root {
    --ak-table-font-size: 16px
  }
}

@media (min-width:992px) {
  :root {
    --ak-table-font-size: 18px
  }

  .tabpage {
    padding-left: 2rem;
    padding-right: 2rem
  }
}

@media (min-width:1200px) {
  .tabpage {
    padding-left: 4rem;
    padding-right: 4rem
  }
}

nav.navbar-blue {
  background-color: dodgerblue;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  justify-items: center;
  padding: .5em 1em;
  gap: 1rem 2rem;
  font-size: 18px;
  z-index: 2
}

.navbar-brand {
  color: #fff;
  font-size: 20px
}

.navbar-links {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 1rem 2rem
}

nav a {
  color: #fff;
  opacity: 1;
  text-decoration-thickness: 1px;
  text-underline-offset: .375em;
  font-size: 20px
}

.navbar-links a:hover {
  color: #fff;
  opacity: 1
}

@media (min-width:768px) {
  nav.navbar-blue {
    flex-direction: row;
    position: sticky;
    top: 0
  }

  .navbar-links {
    flex-direction: row;
    align-items: center
  }
}

.grid-pattern-transponder {
  display: inline-grid;
  grid-template-columns: 15em 5.5em 2.5em 5.5em 4.5em 4.5em 4.5em 4em 5em;
  grid-template-areas: "tpalias freq pol dvb sr tsid onid pos select";
  width: -moz-fit-content;
  width: fit-content;
  align-items: center
}

.grid-pattern-transponder > span {
  padding: .5rem .5em;
  min-height: 100%;
  display: inline-flex;
  align-items: center
}

.grid-tp-header {
  border: 1px solid var(--ak-table-header-border-color);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  background-color: var(--ak-table-header-background-color);
  color: var(--ak-table-header-color)
}

.grid-tp-header>:not(:last-child) {
  border-right: 1px solid var(--ak-table-header-border-color)
}

.grid-tp-row {
  margin-top: -1px;
  border: 1px solid var(--ak-table-border-color);
  width: -moz-fit-content;
  width: fit-content
}

.grid-tp-row:last-child {
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius)
}

.grid-tp-row>.grid-pattern-transponder>:not(:last-child) {
  border-right: 1px solid var(--ak-table-border-color)
}

.grid-tp-row>.grid-pattern-transponder:hover,
.grid-pattern-transponder:has(+ .grid-services:not(.hidden)) {
  background: var(--ak-bg-hover-overlay)
}

div.grid-services {
  padding: 1em 1em 2.5em;
  border-top: 1px solid var(--ak-table-border-color)
}

.grid-pattern-services {
  display: grid;
  grid-template-columns: 14em 5em 6em 8em 5em 6em;
  font-size: clamp(16px, var(--ak-font-size) - 2px, 16px);
  width: -moz-fit-content;
  width: fit-content
}

.grid-pattern-services>* {
  padding: .5em;
  min-height: 100%
}

.grid-pattern-services:not(:last-child) {
  border-bottom: 1px solid var(--ak-table-border-color)
}

.tpalias-all {
  display: inline-flex;
  justify-content: space-between;
  align-items: center
}

.tpalias-all:hover {
  cursor: pointer;
}

span.number-of-services {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  min-width: 2em;
  padding: 0 2px;
  font-size: .875em;
  user-select: none;
  border-radius: var(--border-radius);
  border: 1px solid var(--ak-lightgrey-border);
  color: var(--ak-lightgrey-color);
  background-color: transparent
}

span.number-of-services:hover {
  cursor: pointer
}


.grid-3 {
  grid-column-gap: var(--grid-spacing-horizontal);
  grid-row-gap: var(--grid-spacing-vertical);
  display: grid;
  grid-template-columns: 1fr;
  margin: 0
}

@media (min-width:840px) {
  .grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr))
  }
}

.grid-3>* {
  min-width: 0
}

footer.ak {
  display: flex;
  flex-direction: column;
  align-content: space-around;
  align-items: center;
  justify-items: center;
  gap: 1.5rem;
  padding: 3rem 1rem;
  border-top: 1px solid var(--ak-table-header-border-color);
  font-size: 16px;
  background-color: hsl(210, 13%, 15%)
}

form.theme-switch {
  display: flex;
  gap: 0;
  font-size: 16px;
  margin: 0;
  justify-content: center
}

form.theme-switch>* {
  font-size: 16px;
  margin: 0;
  border-radius: 0;
  padding: .5rem;
  width: 5em;
  border: 1px solid var(--ak-secondary);
  color: var(--ak-secondary);
  text-align: center
}

form.theme-switch input[type=radio] {
  display: none
}

form.theme-switch>label:not(:first-child):not(:last-child) {
  border-left: 0;
  border-right: 0
}

form.theme-switch>:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

form.theme-switch>:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

form.theme-switch>[role="button"]:has(input[type="radio"]:checked) {
  background-color: var(--ak-secondary-hover);
  color: var(--ak-secondary-inverse)
}

.selection-transponder-print {
  display: inline-flex;
  align-items: center;
  gap: 1rem
}

.selection-grid {
  display: flex;
  flex-direction: column;
  grid-template-columns: repeat(25em);
  max-width: 25em;
  gap: 1rem
}

.selection-grid:has(#show-selected-transponders:not(:checked))>input[type="text"],
.selection-grid:has(#show-selected-transponders:not(:checked))>button {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none
}

label.show-selected-transponders {
  display: inline-grid;
  grid-template-columns: minmax(6em, 18em) 3.5em 3.5em;
  margin: 0
}

label.show-selected-transponders>* {
  display: inline-flex;
  align-items: center
}

label.show-selected-transponders>:first-child {
  justify-content: center
}

label.show-selected-transponders>:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px
}

label.show-selected-transponders>:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0
}

label:has(input[type="checkbox"]:checked)>#number-selected-transponders {
  color: dodgerblue;
  font-weight: 500
}

details:has(#show-selected-transponders:checked)>summary {
  color: dodgerblue
}

div.div-form-select-search {
  position: sticky;
  top: 0;
  background-color: var(--background-color);
  padding-top: 1em;
  padding-bottom: 1em;
  max-width: calc(51em + 2px);
  margin-bottom: 1rem
}

.grid-pattern-services:first-child,
.footer-text {
  color: var(--ak-muted-color)
}

.selection-transponder-print>input,
.selection-transponder-print>button,
.selection-grid input,
.selection-grid button,
label.show-selected-transponders input[type=checkbox] {
  margin: 0
}

@media (min-width:768px) {
  div.div-form-select-search {
    top: calc(48px)
  }
}

@media (min-width:992px) {
  div.div-form-select-search {
    top: calc(47px)
  }
}

.form-select-search {
  display: flex;
  gap: 0;
  align-items: center;
  border-radius: var(--border-radius);
  margin: 0
}

.form-select-search input[type=search]:focus {
  box-shadow: inset 0 0 0 2px dodgerblue
}

.form-select-search select {
  background-color: dodgerblue;
  color: hsl(210, 13%, 100%);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin: 0;
  height: unset;
  flex: 1 0 11em;
  border-color: dodgerblue;
  background-image: var(--ak-icon-chevron-light)
}

.form-select-search input[type="search"] {
  border-color: dodgerblue;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin: 0;
  height: unset
}

.form-select-search input[type="search"]:focus {
  outline: 3px solid hsla(197, 100%, 43%, 0.2);
  outline-offset: 0
}

#databases_sat,
#database_xml,
#database_acm {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0rem
}

.details-info>summary::after {
  margin-inline-start: 0
}

.details-info>summary {
  font-size: 1.25rem
}

.details-info[open]>summary {
  margin-bottom: calc(var(--spacing) * 1.5)
}

details#view_selection {
  padding-top: 0.5rem;
}

.window {
  max-height: 60vh;
  overflow-y: scroll;
  border: 1px solid var(--ak-table-border-color);
  max-width: fit-content
}

#services-table {
  table-layout: fixed;
  width: max-content
}

input[type="number"].tp-output {
  padding-top: .125rem;
  padding-bottom: .125rem;
  margin: 0;
  margin-bottom: 0;
  line-height: 1;
  height: unset;
  padding-right: 0
}

.tp-link-icon {
  background-image: var(--ak-icon-follow-link);
  background-position: center;
  background-size: 1.5rem;
  background-repeat: no-repeat;
  width: 2.5rem;
  height: 1.5rem
}

input[type="checkbox"].cb-transponder-select {
  margin-top: 0
}

strong {
  font-weight: 600;
}