: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-bg-color: hsl(210,90%,97%);
  --ak-palegreen: hsl(120, 100%, 95%);
  --ak-paleblue: hsl(210, 90%, 95%);
  --ak-palegrey: hsl(210, 13%, 95%);
  --ak-service-color-encrypted: hsl(0, 100%, 25%);
  --ak-service-color-radio: hsl(207, 44%, 49%);
  --ak-bg-hover-overlay: hsla(30, 11%, 35%, 0.05);
  --ak-bg-hover-effect: brightness(95%);
  --ak-code-color: hsl(330,67%,52%);
}

@media only screen and (prefers-color-scheme:dark) {
  :root:not([data-theme]) {
    --ak-table-bg-color: hsl(210,90%,5%);
    --ak-palegreen: hsl(120, 100%, 5%);
    --ak-paleblue: hsl(200, 100%, 5%);
    --ak-palegrey: hsl(210, 13%, 5%);
    --ak-service-color-encrypted: hsl(0, 20%, 60%);
    --ak-service-color-radio: hsl(207, 44%, 49%);
    --ak-bg-hover-overlay: hsla(0, 50%, 30%, 0.05);
    --ak-bg-hover-effect: brightness(105%);
    --ak-code-color: hsl(330,67%,42%);
  }
}

[data-theme=dark] {
  --ak-table-bg-color: hsl(210,90%,5%);
  --ak-palegreen: hsl(120, 100%, 5%);
  --ak-paleblue: hsl(200, 100%, 5%);
  --ak-palegrey: hsl(210, 13%, 5%);
  --ak-service-color-encrypted: hsl(0, 20%, 60%);
  --ak-service-color-radio: hsl(207, 44%, 49%);
  --ak-bg-hover-overlay: hsla(0, 50%, 30%, 0.05);
  --ak-bg-hover-effect: brightness(105%);
  --ak-code-color: hsl(330,67%,42%);
}

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

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: 4rem 1rem
}

.grid-inputs-rf {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 44rem;
}

@media (min-width: 1340px) {
  .grid-inputs-rf {
    max-width: 88rem;
  }
}

article.rf-input {
  width: 100%;
  margin-bottom: 0;
}

@media (min-width: 576px) {
  article.rf-input {
    width: fit-content;
    max-width: 100%;
  }
}

article.rf-input > div {
  padding: 2px;
}

article.bordered {
  border: 1px solid var(--pico-card-border-color);
  /* box-shadow: none; */
  /* max-width: 1200px; */
}

.hidden {
  display: none;
}


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

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

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

.padding-tb {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

table.fixed {
  table-layout: fixed;
  width: max-content;
}
table.fixed {
  white-space: nowrap;
}

table input,
table select,
table label {
  margin-bottom: 0;
}


.padding-lr {
  padding-left: 1rem;
  padding-right: 1rem;
}

.radios-input {
  margin-bottom: 0;
}

.radios-input [role=button],
.radios-input select {
  --pico-form-element-spacing-horizontal: 1rem;
}

.radios-input select {
  width: fit-content;
}

.radios-input>[role="button"]:has(input[type="radio"]:checked) {
  background-color: var(--pico-secondary);
  color: var(--pico-secondary-inverse);
}

input::-webkit-list-button {
  appearance: none;
  display: block;
  position: relative;
  cursor: default;
  align-self: stretch;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  -webkit-user-select: none;
  inline-size: 16px;
  block-size: 100%;
  color: red;
}


input::-webkit-list-button {
  width: 1rem;
  content: var(--pico-icon-chevron);
  /* content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71 42"><path fill="rgb(0, 122, 255)" d="M36.00979 41.8692c1.70898 0 3.17383-.63483 4.49219-2.00201L69.45706 10.6192c1.02539-1.07428 1.61133-2.39264 1.61133-3.95514C71.06839 3.49017 68.52933 1 65.40433 1c-1.51367 0-2.97852.63477-4.10156 1.75781L36.05863 28.4414 10.76566 2.75781C9.64261 1.63476 8.2266 1 6.61527 1c-3.125 0-5.61523 2.49017-5.61523 5.66406 0 1.5625.53711 2.88086 1.61133 3.95514l28.95508 29.24799c1.36719 1.36719 2.7832 2.00201 4.44336 2.00201z"/></svg>'); */
}


/*****************************************************************************/
/*** Input number: Remove up-down arrows in Chrome, Safari, Edge, Opera
/*****************************************************************************/
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/*****************************************************************************/
/*** Input number: Remove up-down arrows in Firefox
/*****************************************************************************/
input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

fieldset.multicast-group {
  width: fit-content;
}

fieldset.multicast-group > input {
  text-align: right;
}

fieldset.multicast-group > input:nth-of-type(n+1):nth-of-type(-n+4) {
  width: 3.5rem;
}


fieldset.multicast-group > input:nth-of-type(n+5):nth-of-type(-n+5) {
  width: 4.5rem;
  border-left-width: 0.25rem;
}

input.port { 
  width: 4.5rem;
}

fieldset.multicast-group > span {
  align-content: center; 
  text-align: center; 
  width: 2px;
  background-color: var(--pico-form-element-border-color);
}

tr :is([role="group"], input, fieldset) {
  margin-bottom: 0;
}

fieldset[name="rx-tx"] select:first-child {
  max-width: 6rem;
}

.global-settings {
  border: 1px solid var(--pico-card-border-color);
  border-radius: var(--pico-border-radius);
  padding: 1rem;
  background-color: var(--pico-card-sectioning-background-color);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.global-settings summary {
  font-size: 1rem;
  font-weight: 500;
}

.global-settings summary+* {
  padding-top: 1rem;
  padding-left: 1.5rem;
}

.dropdown summary {
  overflow: hidden;
}

#table-dvbrx,
#table-mpts {
  margin-bottom: 1rem;
}

/* SWITCH */
label.switch {
  position: relative;
  display: inline-block;
  width: 4.5rem;
  height: 2.375rem;
  font-size: 1rem;
  /* font-family: system-ui; */
  --r: 50%;
  --w: 1.875rem;
  --h: 1.875rem;
  --d: 0.25rem;
  --x: 2.125rem;
  --bg-on: var(--pico-primary);
  --bg-off: #ccc;
  --bg-slider: white;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-off);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "off";
  line-height: 1.875;
  text-align: center;
  color: var(--bg-off);
  height: var(--h);
  width: var(--w);
  left: var(--d);
  top: var(--d);
  background-color: var(--bg-slider);
  -webkit-transition: .2s;
  transition: .2s;
}

input:checked + .slider {
  background-color: var(--bg-on);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--bg-on);
}

input:checked + .slider:before {
  -webkit-transform: translateX(var(--x));
  -ms-transform: translateX(var(--x));
  transform: translateX(var(--x));
  content: "on";
  color: var(--bg-on);
}

/* Rounded sliders */
.slider.round {
  border-radius: var(--h);
}

.slider.round:before {
  border-radius: var(--r);
}


#table-mpts tr:not(:hover) td
{
  background-color: var(--ak-table-bg-color);
}

#table-dvbrx :is(th, td),
#table-mpts :is(th, td),
#table-spts :is(th, td)
{
  padding: 0.375em 0.75rem;
}

#table-dvbrx :is(summary, select, [role=button], button, [type=number]),
#table-mpts :is(summary, select, [role=button], button, [type=number]),
#table-spts :is(summary, select, [role=button], button, [type=number]),
input[type=number] {
  padding: 0.25em 0.5rem;
  height: auto;
  color: var(--pico-contrast-color);
}

#table-dvbrx :is(select[name='select-rf-used'],select[name='select-ub']) {
  min-width: 4.5rem;
}

#table-dvbrx :is(select, summary::after) {
  margin-right: 0rem;
  background-position: center right 0.375rem;
}

#table-spts td:first-child {
  text-align: center;
}

dialog article {
  max-height: none;
  overflow-x: hidden;
  max-width: 500px;
}

ul.modal-list {
  padding-inline-start: 0;
  padding: 0px;
}

ul.modal-list li {
  list-style:none;
  min-width: fit-content;
  width: 24rem;
  padding: 0px 0px 0px 2px;
}

ul.modal-list li:has(input[type='search']) {
  max-width: 100%;
}

div.modal-content .transponderlist {
  overflow: auto;
  max-height: 310px;
}


dialog article>header {
  position: sticky;
  top: calc(var(--pico-block-spacing-vertical)* -1);
  z-index: 999;
}

dialog article>footer {
  position: sticky;
  bottom: calc(var(--pico-block-spacing-vertical)* -1);
  z-index: 999;
}

@media (max-height:574px) {
  dialog article {
    max-height: calc(100vh - var(--pico-spacing) * 6);
  }

  div.modal-content {
    max-height: 100%;
  }

  div.modal-content .transponderlist {
    max-height: 100%;
  }
}

button.small-btn {
  padding: 0.125rem 0.5rem;
  width: 100%;
  text-align: left;
}

tr.spts-tv td {
  color: var(--pico-color);
}

tr.spts-radio td:nth-child(2) {
  color: var(--ak-service-color-radio);
}

tr.spts-free td {
  color: var(--pico-color);
}

tr.spts-encrypted td:nth-child(2) {
  color: var(--ak-service-color-encrypted);
}

[type="checkbox"][name="spts-selection"] {
  width: 1.5rem;
  height: 1.5rem
}
[type="checkbox"][name="spts-selection"]:checked {
  background-size: 1rem;
}

article.spts-options {
  max-width: 400px;
  min-width: 200px;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

article.spts-options>div:not(:last-child) {
  margin-bottom: 2rem;
}

div.spts-multicast-start {
  overflow: auto;
  padding: 2px;
}

div.spts-multicast-start > [role=group]{
  min-width: 200px;
  width: 100%
}

.no-shadow {
  box-shadow: none;
}

main>section.area {
  padding: 2rem 0rem 1rem 0rem;
  margin: 0;
}

@media screen and (min-width: 576px) {
  main>section.area {
    padding: 2rem 1rem 1rem 1rem;
    margin: 0;
  }
}

@media screen and (min-width: 1500px) {
  main>section.area {
    padding: 2rem 2rem 1rem 2rem;
    margin: 0;
  }
}

.bg-palegreen {
  background-color: var(--ak-palegreen);
}
.bg-palegrey {
  background-color: var(--ak-palegrey);
}
.bg-paleblue {
  background-color: var(--ak-paleblue);
}

table tbody tr:hover td {
  background: var(--ak-bg-hover-overlay);
}

.dark-footer {
  background-color: hsl(210, 13%, 15%);
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}


[role=group].theme-switch {
  max-width: 18rem;
}

th[data-type="string"]:hover {
  cursor: pointer;
  background: var(--ak-bg-hover-overlay);
}

#number-selected-spts {
  padding: 0.25rem 1rem;
}

.left-border-grey {
  box-shadow: inset 0.375rem 0 0 dimgray;
}
.left-border-blue {
  box-shadow: inset 0.375rem 0 0 steelblue;
}
.left-border-green {
  box-shadow: inset 0.375rem 0 0 green;
}

code {
  /* color: hsl(300, 100%, 40%); */
  color: hsl(330,67%,42%);
  /* font-size: 0.875rem;
  padding: 0.375rem 0.375rem; */
}


button.btn-select-rx {
  padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
  padding-left: var(--pico-form-element-spacing-horizontal);
  padding-inline-start: var(--pico-form-element-spacing-horizontal);
  padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
  background-image: var(--pico-icon-chevron);
  background-position: center right .5rem;
  background-size: 1rem auto;
  background-repeat: no-repeat;
  border-color: var(--pico-form-element-border-color);
}


.select-group {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  width: fit-content;
}

.select-group :is(label,select) {
  margin: 0;
  width: 100%;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.select-group>div{
  display: grid;
  grid-template-columns: 5rem 12rem;
  width: fit-content;
  align-items: baseline;
  justify-items: stretch;
}

.select-group select {
  min-width: 100%;
  padding-left: 0.75rem;
  padding-inline-end: 0.5rem;
}

.select-group select:focus {
  z-index: 1;
}

.select-group div:nth-of-type(n+5):nth-of-type(-n+5) {
  margin-top: 0.5rem;
}

.select-group div:nth-of-type(n+8):nth-of-type(-n+8) {
  margin-bottom: 0.5rem;
}

.footer-text {
  color: var(--pico-secondary);
}