@charset "UTF-8";
/* /templates/2ip/css/provider.css */
.t3-sl-totop .advertising {
  width: 90px;
  height: 165px;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  bottom: 17px;
  color: var(--twoip-on-surface-variant);
  text-align: center;
}
.t3-sl-totop .advertising img {
  width: 65px;
  margin-top: 13px;
}
.t3-sl-totop .advertising .name {
  font-size: 90%;
  color: var(--twoip-on-surface);
}
.t3-sl-totop .advertising .twoip-icon {
  font-size: 170%;
  margin-top: 8px;
}
.t3-sl-totop .advertising .mediakit {
  font-size: 80%;
}
.tooltip.show {
  opacity: 0.95;
}
.tooltip-arrow {
  border-top-color: var(--twoip-on-surface) !important;
}
.tooltip-inner {
  background-color: var(--twoip-on-surface);
  color: var(--twoip-surface);
  font-family: "2ip-light";
  padding: 5px 10px;
}
.ipblock .tooltip-arrow {
  border-top-color: var(--twoip-surface) !important;
  border-bottom-color: var(--twoip-surface) !important;
}
.ipblock .tooltip-inner {
  background-color: var(--twoip-surface);
  color: var(--twoip-on-surface);
  font-family: "2ip";
  padding: 5px 10px;
}
.ipblock .changeip-mini .tooltip.show {
  opacity: 1;
}

/* Network import labels share the cabinet form axes without decorative slots. */
.twoip-network-import-fields > .twoip-form-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px 16px;
}
.twoip-network-import-fields > .twoip-form-group::before,
.twoip-network-import-fields > .twoip-form-group::after {
  content: none;
}
.twoip-network-import-fields > .twoip-form-group > :is(label,.twoip-current-grid) {
  width: auto;
  min-width: 0;
  float: none;
  padding: 0;
}
.twoip-network-import-fields > .twoip-form-group > label {
  margin: 0;
  text-align: start;
}
@media (min-width: 992px) {
  .twoip-network-import-fields > .twoip-form-group {
    grid-template-columns: minmax(0, 25%) minmax(0, 1fr);
  }
}

/* Keep the count and its shared information action together. */
.twoip-awards-checks { display: inline-flex; align-items: center; white-space: nowrap; }

/* The shared search ad stays in normal flow before filters and AJAX results. */
body .twoip-provider-search-ad { margin-block: var(--twoip-service-form-section-gap); }

/* /templates/2ip/css/account.css */
.blog_blog .leading {
  margin-top: 40px;
  text-align: justify;
}
@media screen and (max-width: 480px) {
  .blog_blog .leading {
    text-align: left;
  }
}
.blog_blog .leading.leading-0 {
  margin-top: 10px;
}
.blog_blog .leading.leading-30 {
  margin-bottom: 30px;
}
.blog_blog .leading .article-header {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--twoip-outline-variant);
  margin-bottom: 10px;
}
.blog_blog .leading .article-intro {
  margin-bottom: -5px;
}
.blog_blog .items-leading .leading,
.blog_blog .items-row .item {
  margin-bottom: 24px;
}
.blog_blog article {
  display: flow-root;
}
.blog_blog .article-title {
  overflow-wrap: anywhere;
}
.blog_blog .readmore {
  margin-top: 12px;
}
.item-page_blog h1.article-title {
  font-size: 150% !important;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--twoip-outline-variant);
  margin-bottom: 10px !important;
  font-weight: bold;
}
.item-page_blog .article-content {
  text-align: justify;
}
@media screen and (max-width: 480px) {
  .item-page_blog .article-content {
    text-align: left;
  }
}
.item-page_blog .article-content .helpservice {
  margin-bottom: 15px;
}
.item-page_blog .article-content .helpservice .twoip-icon {
  top: 1px;
}

.item-page_cabinet .addapi .twoip-icon {
  color: var(--twoip-primary);
}
.item-page_cabinet .twoip-form-horizontal {
  margin-bottom: 15px;
}
/* Cabinet modals move to body, outside .item-page_cabinet. */
.item-page_cabinet .twoip-form-horizontal .twoip-form-group,
.twoip-form-horizontal[action^="/service/account/admin/data/"] > .twoip-form-group {
  margin: 0;
  padding: 0;
}
.item-page_cabinet table td.ellipsis {
  max-width: 125px;
}
.item-page_cabinet .cabinet-provider-text {
  overflow-wrap: normal;
  word-break: normal;
}
.item-page_cabinet .cabinet-provider-actions {
  white-space: nowrap;
  width: 1%;
}
.item-page_cabinet .cabinet-provider-actions .modal {
  white-space: normal;
}
/* Keep cabinet headings together when their labels wrap on narrow screens. */
@media screen and (max-width: 767px) {
  .item-page_cabinet {
    min-width: 0;
  }
  .item-page_cabinet .article-content > .row > .collapse {
    min-width: 0;
  }
  .item-page_cabinet .collapse .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .item-page_cabinet .collapse .table-responsive > .table:not([data-api-management-table], [data-api-trial-table]) {
    min-width: 620px;
  }
  .item-page_cabinet #api .tab-pane .table-responsive > .table:not([data-api-management-table]) {
    min-width: 900px;
  }
  .item-page_cabinet #tabs-1 .table-responsive td:first-child,
  .item-page_cabinet #tabs-1 .table-responsive td:nth-child(3),
  .item-page_cabinet #tabs-1 .table-responsive td:nth-child(5),
  .item-page_cabinet #tabs-2 .table-responsive td:first-child,
  .item-page_cabinet #tabs-2 .table-responsive td:nth-child(3),
  .item-page_cabinet #tabs-2 .table-responsive td:nth-child(5),
  .item-page_cabinet #tabs-3 .table-responsive td:first-child,
  .item-page_cabinet #tabs-3 .table-responsive td:nth-child(5),
  .item-page_cabinet #tabs-3 .table-responsive td:nth-child(6) {
    white-space: nowrap;
  }
  .item-page_cabinet #tabs-3 .table-responsive .result-credential-action {
    min-height: 44px;
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
  }
  .item-page_cabinet .collapse .twoip-form-horizontal > .twoip-form-group {
    margin-bottom: 12px;
  }
  .item-page_cabinet .collapse .form-control {
    width: 100%;
    max-width: 100%;
  }
  .item-page_cabinet #add-speedtest-api .form-control {
    min-height: 44px;
  }
  .item-page_cabinet #speedtest-new-date::-webkit-date-and-time-value {
    min-height: 1.5em;
  }
  .item-page_cabinet .btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .item-page_cabinet .collapse > .text-center > .btn {
    display: block;
    width: 100%;
  }
  .item-page_cabinet .collapse > .twoip-form-horizontal > .twoip-form-group.text-center > .btn {
    width: 100%;
  }
  .item-page_cabinet #addapi > .twoip-form-group.text-center > .btn {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .modal[id^="editapi-"] .modal-dialog {
    display: block;
    width: calc(100% - 20px);
    margin: 10px auto;
  }
  .modal[id^="editapi-"] .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 20px);
    overflow: hidden;
  }
  .modal[id^="editapi-"] .modal-body {
    min-height: 0;
    overflow-y: auto;
  }
  .modal[id^="editapi-"] .modal-footer {
    flex-shrink: 0;
  }
}

.item-page_cabinet table th {
  word-break: normal;
  overflow-wrap: normal;
}
.item-page_cabinet .twoip-cabinet-status {
  min-width: 12ch;
}

.item-page_cabinet .twoip-cabinet-heading {
  max-width: 100%;
}
/* Rows share one label/control grid, including modals relocated to body. */
.twoip-form-horizontal[action^="/service/account/admin/data/"] {
  --twoip-cabinet-label-width: 25%;
}
body .twoip-form-horizontal[action^="/service/account/admin/data/"] > .twoip-form-group:has(> label) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 16px;
  margin-block-end: var(--twoip-form-support-gap, 8px);
  align-items: center;
}
/* Legacy clearfix pseudo-elements must not participate as grid children. */
body .twoip-form-horizontal[action^="/service/account/admin/data/"] > .twoip-form-group:has(> label)::before,
body .twoip-form-horizontal[action^="/service/account/admin/data/"] > .twoip-form-group:has(> label)::after {
  content: none;
}
body .twoip-form-horizontal[action^="/service/account/admin/data/"] > .twoip-form-group > :is(label,.twoip-current-grid) {
  width: auto;
  min-width: 0;
  float: none;
  padding: 0;
}
body .twoip-form-horizontal[action^="/service/account/admin/data/"] > .twoip-form-group > label {
  position: static;
  grid-column: 1;
  grid-row: 1;
  text-align: start;
  word-break: normal;
  overflow-wrap: normal;
}
@media (min-width: 992px) {
  body .twoip-form-horizontal[action^="/service/account/admin/data/"] > .twoip-form-group:has(> label) {
    grid-template-columns: minmax(0, var(--twoip-cabinet-label-width)) minmax(0, 1fr);
  }
  body .twoip-form-horizontal[action^="/service/account/admin/data/"] > .twoip-form-group > .twoip-current-grid:not(label) {
    grid-column: 2;
    grid-row: 1;
  }
  body .twoip-form-horizontal[action^="/service/account/admin/data/"] > .twoip-form-group > label {
    text-align: end;
  }
  body .twoip-form-horizontal[action^="/service/account/admin/data/"] > .twoip-cabinet-form-actions {
    margin-inline-start: calc(var(--twoip-cabinet-label-width) + 16px);
  }
}

body .twoip-form-horizontal[action^="/service/account/admin/data/"] > .twoip-form-group:has(> label) .form-control {
  margin-block: 0;
}

/* Multiline editors keep their label at the start of the text area. */
body .twoip-form-horizontal[action^="/service/account/admin/data/"] > .twoip-form-group:has(> label):has(textarea) {
  align-items: start;
}

@media (max-width: 991px) {
  body .twoip-form-horizontal[action^="/service/account/admin/data/"] > .twoip-form-group > .twoip-current-grid:not(label) {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Connection monitoring metadata shares one axis, including the native switch. */
.account .twoip-monitor-metadata {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 12px 24px;
  padding-block: 6px;
}
.account .twoip-monitor-metadata-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.account .twoip-monitor-metadata-item > .twoip-icon {
  position: static;
  flex-shrink: 0;
  margin: 0;
}
@media (min-width: 1024px) {
  .account .twoip-monitor-metadata {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Blog media retains its aspect ratio within the allocated article column. */
.blog_blog img { max-inline-size: 100%; block-size: auto; }

/* Only the history chart caption wraps; numeric data and action hit areas retain their metrics. */
.speed-history-chart-heading { display: inline-block; max-inline-size: 12ch; white-space: normal; }

.speed-history-fit-column { width: 1%; }

/* History captions share the cell axis; equal arrow slots keep sorting neutral. */
#speedtable { --twoip-history-sort-slot: 20px; }
/* Required only here to override the shared left-axis !important contract. */
#speedtable > :is(thead,tbody) > tr > :is(th,td) { text-align: var(--twoip-cabinet-date-align, center) !important; padding-inline: var(--twoip-space-1, 4px); }
#speedtable .dt-column-header.twoip-sort-control {
  display: inline-grid;
  grid-template-columns: var(--twoip-history-sort-slot) max-content var(--twoip-history-sort-slot);
  column-gap: 0;
  align-items: center;
}
#speedtable .dt-column-header.twoip-sort-control::before { content: ''; grid-column: 1; }
#speedtable .dt-column-title { grid-column: 2; }
#speedtable .dt-column-order { grid-column: 3; justify-self: end; }
#speedtable tbody tr:has(> td.twoip-action-cell) > td:not(:nth-child(6)) { white-space: nowrap; }

/* Provider names use their allocated column instead of inflating the table. */
#speedtable tbody tr:has(> td.twoip-action-cell) > td:nth-child(6) { white-space: normal; overflow-wrap: anywhere; }

/* Shared separation from history pagination; session actions retain their spacing. */
.account .twoip-account-actions--history {
  --twoip-history-actions-gap: 12px;
  margin-block-start: var(--twoip-history-actions-gap);
}

/* Cabinet date columns keep one mobile axis, including their time line. */
@media (max-width: 767px) {
  body .account table :is(th,td).twoip-cabinet-date { --twoip-cabinet-date-align: left; text-align: left !important; }
  body .account table .twoip-cabinet-date .twoip-date-time { text-align: inherit; }
  body .account table .twoip-cabinet-date .twoip-monitor-value { justify-content: flex-start; }
  body .account table th.twoip-cabinet-date .dt-column-header { display: flex; justify-content: flex-start; }
  body .account table th.twoip-cabinet-date .dt-column-header::before { content: none; }
}


/* API record sets retain the original cabinet row, type and action geometry. */
body .dt-bootstrap5 table.dataTable[data-api-management-table] { table-layout: auto; inline-size: 100%; }
body table[data-api-management-table] {
  --twoip-api-action-count: 1;
  --twoip-api-action-gap: var(--twoip-space-2, 8px);
}
body table[data-api-action-count="2"] { --twoip-api-action-count: 2; }
body table[data-api-action-count="3"] { --twoip-api-action-count: 3; }
body table[data-api-management-table] th[data-cabinet-action] {
  width: calc(var(--twoip-api-action-count) * var(--twoip-icon-action-size) + (var(--twoip-api-action-count) - 1) * var(--twoip-api-action-gap) + 2 * var(--twoip-table-cell-padding-inline));
}
body table[data-api-management-table] .twoip-api-actions {
  display: inline-flex; align-items: center; gap: var(--twoip-api-action-gap); white-space: nowrap;
}
body table[data-api-management-table] .twoip-api-actions > form { display: inline-flex; margin: 0; }
body table[data-api-management-table] span.twoip-truncate { display: block; }

/* Owner credentials remain one line; the existing table-row scroll owns overflow. */
body table[data-api-management-table] .twoip-api-key {
  display: block; white-space: nowrap; overflow-wrap: normal;
  line-height: calc(var(--twoip-icon-action-size) / 2);
}
body table[data-api-management-table][data-cabinet-table^="speedtest-"]:not(.collapsed) th.twoip-api-key-cell { width: 32%; }
/* A block flex status has no inline baseline gap inside date cells. */
body table[data-api-management-table] .twoip-api-expiration > [data-twoip-cabinet-status] {
  display: flex; align-items: center; justify-content: center;
}
body .account table[data-api-management-table] .twoip-api-expiration .twoip-status-icon {
  margin: 0; position: static;
}

/* API editors opt into shared compact form rhythm without changing field geometry. */
.twoip-api-edit { --twoip-form-gap: var(--twoip-service-form-control-gap); }
.twoip-api-create {
  --twoip-form-gap: var(--twoip-service-form-control-gap);
  margin: 0;
}
.twoip-api-create > h4 { margin: 0; }
/* The shared collapse flow-root must not replace these forms' opt-in grid. */
body .account form.twoip-api-create:is(.collapse.show,.collapsing) { display: grid; }

/* Site-management records share one semantic cell axis. The inherited site
   table contract uses !important; override it only inside these owned tables. */
body table.table.twoip-data-table[data-cabinet-table] > :is(thead,tbody,tfoot) > tr > :is(th,td) {
 --twoip-cabinet-cell-align: left;
 --twoip-cabinet-cell-justify: flex-start;
 text-align: var(--twoip-cabinet-cell-align) !important;
 vertical-align: middle;
 white-space: nowrap;
 padding: var(--twoip-table-cell-padding-block) var(--twoip-table-cell-padding-inline);
}
body table.table.twoip-data-table[data-cabinet-table] > :is(thead,tbody,tfoot) > tr > :is(.twoip-cabinet-date,.twoip-action-cell) {
 --twoip-cabinet-cell-align: center;
 --twoip-cabinet-cell-justify: center;
}
body table[data-cabinet-table] th .dt-column-header {
 display: flex; justify-content: var(--twoip-cabinet-cell-justify); align-items: center;
}
body table[data-cabinet-table] .twoip-cabinet-date .twoip-date-time { display: inline; text-align: center; }

/* Cabinet text borders follow the caption, including its bounded ellipsis. */
body .t3-content .account .twoip-inline-link:not(.twoip-inline-link--with-label),
body .t3-content .account .twoip-inline-link .twoip-inline-label:not(:has(.twoip-inline-label)) {
  display: inline-block;
  inline-size: fit-content;
  max-inline-size: 100%;
  min-inline-size: 0;
  flex: 0 1 auto;
}

/* API creation owns the trigger/form/table rhythm, including a collapsed form. */
.twoip-api-create-panel {
  display: grid; gap: var(--twoip-service-form-control-gap); min-inline-size: 0;
  padding-block-end: var(--twoip-service-form-control-gap);
}

/* /media/2ip/vendor/mprogress/0.1.0-2ip-fork/mprogress.css */
/* Make clicks pass-through */
.ui-mprogress {
  pointer-events: none;
}
.ui-mprogress .deter-bar,
.ui-mprogress .indeter-bar,
.ui-mprogress .query-bar,
.ui-mprogress .bar-bg,
.ui-mprogress .buffer-bg,
.ui-mprogress .mp-ui-dashed {
  position: fixed;
  z-index: 1032;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #0277BD;
}
.ui-mprogress .bar-bg,
.ui-mprogress .buffer-bg {
  z-index: 1031;
  background: #b0d0ef;
}
.ui-mprogress .mp-ui-dashed {
  z-index: 1030;
  background: transparent;
}
.ui-mprogress .mp-ui-dashed:before {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  margin-top: 0px;
  position: absolute;
  background: radial-gradient(#a9c0e9 0%, #a9c0e9 16%, transparent 42%);
  background-size: 10px 10px !important;
  background-position: 0px -23px;
  -webkit-animation: buffer 3s infinite linear;
  -moz-animation: buffer 3s infinite linear;
  -ms-animation: buffer 3s infinite linear;
  -o-animation: buffer 3s infinite linear;
  animation: buffer 3s infinite linear;
}
.ui-mprogress .peg {
  position: absolute;
  display: block;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #0277BD, 0 0 5px #29d;
  opacity: 1;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}
.ui-mprogress .query-bar {
  -webkit-animation: querying 2800ms infinite linear;
  -moz-animation: querying 2800ms infinite linear;
  -ms-animation: querying 2800ms infinite linear;
  -o-animation: querying 2800ms infinite linear;
  animation: querying 2800ms infinite linear;
}
.ui-mprogress .query-bar.end {
  -webkit-animation: endquery 1500ms linear;
  -moz-animation: endquery 1500ms linear;
  -ms-animation: endquery 1500ms linear;
  -o-animation: endquery 1500ms linear;
  animation: endquery 1500ms linear;
}
.ui-mprogress .indeter-bar {
  -webkit-animation: indeterminate 2800ms infinite linear;
  -moz-animation: indeterminate 2800ms infinite linear;
  -ms-animation: indeterminate 2800ms infinite linear;
  -o-animation: indeterminate 2800ms infinite linear;
  animation: indeterminate 2800ms infinite linear;
}
.mprogress-custom-parent {
  overflow: hidden;
  position: relative;
}
.mprogress-custom-parent .deter-bar,
.mprogress-custom-parent .indeter-bar,
.mprogress-custom-parent .query-bar,
.mprogress-custom-parent .bar-bg,
.mprogress-custom-parent .buffer-bg,
.mprogress-custom-parent .mp-ui-dashed {
  position: absolute;
}
@-moz-keyframes querying {
  0% {
    -webkit-transform: translateX(100%) scaleX(0.7);
    -moz-transform: translateX(100%) scaleX(0.7);
    -ms-transform: translateX(100%) scaleX(0.7);
    -o-transform: translateX(100%) scaleX(0.7);
    transform: translateX(100%) scaleX(0.7);
  }
  20% {
    -webkit-transform: translateX(30%) scaleX(0.7);
    -moz-transform: translateX(30%) scaleX(0.7);
    -ms-transform: translateX(30%) scaleX(0.7);
    -o-transform: translateX(30%) scaleX(0.7);
    transform: translateX(30%) scaleX(0.7);
  }
  30% {
    -webkit-transform: translateX(-20%) scaleX(0.4);
    -moz-transform: translateX(-20%) scaleX(0.4);
    -ms-transform: translateX(-20%) scaleX(0.4);
    -o-transform: translateX(-20%) scaleX(0.4);
    transform: translateX(-20%) scaleX(0.4);
  }
  55% {
    -webkit-transform: translateX(-100%) scaleX(0.1);
    -moz-transform: translateX(-100%) scaleX(0.1);
    -ms-transform: translateX(-100%) scaleX(0.1);
    -o-transform: translateX(-100%) scaleX(0.1);
    transform: translateX(-100%) scaleX(0.1);
  }
  55.99% {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
  }
  56% {
    -webkit-transform: translateX(100%) scaleX(0);
    -moz-transform: translateX(100%) scaleX(0);
    -ms-transform: translateX(100%) scaleX(0);
    -o-transform: translateX(100%) scaleX(0);
    transform: translateX(100%) scaleX(0);
  }
  56.99% {
    -webkit-transform: translateX(100%) scaleX(0.7);
    -moz-transform: translateX(100%) scaleX(0.7);
    -ms-transform: translateX(100%) scaleX(0.7);
    -o-transform: translateX(100%) scaleX(0.7);
    transform: translateX(100%) scaleX(0.7);
  }
  70% {
    -webkit-transform: translateX(35%) scaleX(0.7);
    -moz-transform: translateX(35%) scaleX(0.7);
    -ms-transform: translateX(35%) scaleX(0.7);
    -o-transform: translateX(35%) scaleX(0.7);
    transform: translateX(35%) scaleX(0.7);
  }
  85% {
    -webkit-transform: translateX(-28%) scaleX(0.3);
    -moz-transform: translateX(-28%) scaleX(0.3);
    -ms-transform: translateX(-28%) scaleX(0.3);
    -o-transform: translateX(-28%) scaleX(0.3);
    transform: translateX(-28%) scaleX(0.3);
  }
  95% {
    -webkit-transform: translateX(-100%) scaleX(0.1);
    -moz-transform: translateX(-100%) scaleX(0.1);
    -ms-transform: translateX(-100%) scaleX(0.1);
    -o-transform: translateX(-100%) scaleX(0.1);
    transform: translateX(-100%) scaleX(0.1);
  }
  95.99% {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@-webkit-keyframes querying {
  0% {
    -webkit-transform: translateX(100%) scaleX(0.7);
    -moz-transform: translateX(100%) scaleX(0.7);
    -ms-transform: translateX(100%) scaleX(0.7);
    -o-transform: translateX(100%) scaleX(0.7);
    transform: translateX(100%) scaleX(0.7);
  }
  20% {
    -webkit-transform: translateX(30%) scaleX(0.7);
    -moz-transform: translateX(30%) scaleX(0.7);
    -ms-transform: translateX(30%) scaleX(0.7);
    -o-transform: translateX(30%) scaleX(0.7);
    transform: translateX(30%) scaleX(0.7);
  }
  30% {
    -webkit-transform: translateX(-20%) scaleX(0.4);
    -moz-transform: translateX(-20%) scaleX(0.4);
    -ms-transform: translateX(-20%) scaleX(0.4);
    -o-transform: translateX(-20%) scaleX(0.4);
    transform: translateX(-20%) scaleX(0.4);
  }
  55% {
    -webkit-transform: translateX(-100%) scaleX(0.1);
    -moz-transform: translateX(-100%) scaleX(0.1);
    -ms-transform: translateX(-100%) scaleX(0.1);
    -o-transform: translateX(-100%) scaleX(0.1);
    transform: translateX(-100%) scaleX(0.1);
  }
  55.99% {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
  }
  56% {
    -webkit-transform: translateX(100%) scaleX(0);
    -moz-transform: translateX(100%) scaleX(0);
    -ms-transform: translateX(100%) scaleX(0);
    -o-transform: translateX(100%) scaleX(0);
    transform: translateX(100%) scaleX(0);
  }
  56.99% {
    -webkit-transform: translateX(100%) scaleX(0.7);
    -moz-transform: translateX(100%) scaleX(0.7);
    -ms-transform: translateX(100%) scaleX(0.7);
    -o-transform: translateX(100%) scaleX(0.7);
    transform: translateX(100%) scaleX(0.7);
  }
  70% {
    -webkit-transform: translateX(35%) scaleX(0.7);
    -moz-transform: translateX(35%) scaleX(0.7);
    -ms-transform: translateX(35%) scaleX(0.7);
    -o-transform: translateX(35%) scaleX(0.7);
    transform: translateX(35%) scaleX(0.7);
  }
  85% {
    -webkit-transform: translateX(-28%) scaleX(0.3);
    -moz-transform: translateX(-28%) scaleX(0.3);
    -ms-transform: translateX(-28%) scaleX(0.3);
    -o-transform: translateX(-28%) scaleX(0.3);
    transform: translateX(-28%) scaleX(0.3);
  }
  95% {
    -webkit-transform: translateX(-100%) scaleX(0.1);
    -moz-transform: translateX(-100%) scaleX(0.1);
    -ms-transform: translateX(-100%) scaleX(0.1);
    -o-transform: translateX(-100%) scaleX(0.1);
    transform: translateX(-100%) scaleX(0.1);
  }
  95.99% {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@-o-keyframes querying {
  0% {
    -webkit-transform: translateX(100%) scaleX(0.7);
    -moz-transform: translateX(100%) scaleX(0.7);
    -ms-transform: translateX(100%) scaleX(0.7);
    -o-transform: translateX(100%) scaleX(0.7);
    transform: translateX(100%) scaleX(0.7);
  }
  20% {
    -webkit-transform: translateX(30%) scaleX(0.7);
    -moz-transform: translateX(30%) scaleX(0.7);
    -ms-transform: translateX(30%) scaleX(0.7);
    -o-transform: translateX(30%) scaleX(0.7);
    transform: translateX(30%) scaleX(0.7);
  }
  30% {
    -webkit-transform: translateX(-20%) scaleX(0.4);
    -moz-transform: translateX(-20%) scaleX(0.4);
    -ms-transform: translateX(-20%) scaleX(0.4);
    -o-transform: translateX(-20%) scaleX(0.4);
    transform: translateX(-20%) scaleX(0.4);
  }
  55% {
    -webkit-transform: translateX(-100%) scaleX(0.1);
    -moz-transform: translateX(-100%) scaleX(0.1);
    -ms-transform: translateX(-100%) scaleX(0.1);
    -o-transform: translateX(-100%) scaleX(0.1);
    transform: translateX(-100%) scaleX(0.1);
  }
  55.99% {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
  }
  56% {
    -webkit-transform: translateX(100%) scaleX(0);
    -moz-transform: translateX(100%) scaleX(0);
    -ms-transform: translateX(100%) scaleX(0);
    -o-transform: translateX(100%) scaleX(0);
    transform: translateX(100%) scaleX(0);
  }
  56.99% {
    -webkit-transform: translateX(100%) scaleX(0.7);
    -moz-transform: translateX(100%) scaleX(0.7);
    -ms-transform: translateX(100%) scaleX(0.7);
    -o-transform: translateX(100%) scaleX(0.7);
    transform: translateX(100%) scaleX(0.7);
  }
  70% {
    -webkit-transform: translateX(35%) scaleX(0.7);
    -moz-transform: translateX(35%) scaleX(0.7);
    -ms-transform: translateX(35%) scaleX(0.7);
    -o-transform: translateX(35%) scaleX(0.7);
    transform: translateX(35%) scaleX(0.7);
  }
  85% {
    -webkit-transform: translateX(-28%) scaleX(0.3);
    -moz-transform: translateX(-28%) scaleX(0.3);
    -ms-transform: translateX(-28%) scaleX(0.3);
    -o-transform: translateX(-28%) scaleX(0.3);
    transform: translateX(-28%) scaleX(0.3);
  }
  95% {
    -webkit-transform: translateX(-100%) scaleX(0.1);
    -moz-transform: translateX(-100%) scaleX(0.1);
    -ms-transform: translateX(-100%) scaleX(0.1);
    -o-transform: translateX(-100%) scaleX(0.1);
    transform: translateX(-100%) scaleX(0.1);
  }
  95.99% {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@keyframes querying {
  0% {
    -webkit-transform: translateX(100%) scaleX(0.7);
    -moz-transform: translateX(100%) scaleX(0.7);
    -ms-transform: translateX(100%) scaleX(0.7);
    -o-transform: translateX(100%) scaleX(0.7);
    transform: translateX(100%) scaleX(0.7);
  }
  20% {
    -webkit-transform: translateX(30%) scaleX(0.7);
    -moz-transform: translateX(30%) scaleX(0.7);
    -ms-transform: translateX(30%) scaleX(0.7);
    -o-transform: translateX(30%) scaleX(0.7);
    transform: translateX(30%) scaleX(0.7);
  }
  30% {
    -webkit-transform: translateX(-20%) scaleX(0.4);
    -moz-transform: translateX(-20%) scaleX(0.4);
    -ms-transform: translateX(-20%) scaleX(0.4);
    -o-transform: translateX(-20%) scaleX(0.4);
    transform: translateX(-20%) scaleX(0.4);
  }
  55% {
    -webkit-transform: translateX(-100%) scaleX(0.1);
    -moz-transform: translateX(-100%) scaleX(0.1);
    -ms-transform: translateX(-100%) scaleX(0.1);
    -o-transform: translateX(-100%) scaleX(0.1);
    transform: translateX(-100%) scaleX(0.1);
  }
  55.99% {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
  }
  56% {
    -webkit-transform: translateX(100%) scaleX(0);
    -moz-transform: translateX(100%) scaleX(0);
    -ms-transform: translateX(100%) scaleX(0);
    -o-transform: translateX(100%) scaleX(0);
    transform: translateX(100%) scaleX(0);
  }
  56.99% {
    -webkit-transform: translateX(100%) scaleX(0.7);
    -moz-transform: translateX(100%) scaleX(0.7);
    -ms-transform: translateX(100%) scaleX(0.7);
    -o-transform: translateX(100%) scaleX(0.7);
    transform: translateX(100%) scaleX(0.7);
  }
  70% {
    -webkit-transform: translateX(35%) scaleX(0.7);
    -moz-transform: translateX(35%) scaleX(0.7);
    -ms-transform: translateX(35%) scaleX(0.7);
    -o-transform: translateX(35%) scaleX(0.7);
    transform: translateX(35%) scaleX(0.7);
  }
  85% {
    -webkit-transform: translateX(-28%) scaleX(0.3);
    -moz-transform: translateX(-28%) scaleX(0.3);
    -ms-transform: translateX(-28%) scaleX(0.3);
    -o-transform: translateX(-28%) scaleX(0.3);
    transform: translateX(-28%) scaleX(0.3);
  }
  95% {
    -webkit-transform: translateX(-100%) scaleX(0.1);
    -moz-transform: translateX(-100%) scaleX(0.1);
    -ms-transform: translateX(-100%) scaleX(0.1);
    -o-transform: translateX(-100%) scaleX(0.1);
    transform: translateX(-100%) scaleX(0.1);
  }
  95.99% {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@-moz-keyframes endquery {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) scaleX(1);
    -moz-transform: translateX(-100%) scaleX(1);
    -ms-transform: translateX(-100%) scaleX(1);
    -o-transform: translateX(-100%) scaleX(1);
    transform: translateX(-100%) scaleX(1);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateX(-100%) scaleX(1);
    -moz-transform: translateX(-100%) scaleX(1);
    -ms-transform: translateX(-100%) scaleX(1);
    -o-transform: translateX(-100%) scaleX(1);
    transform: translateX(-100%) scaleX(1);
  }
  99% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes endquery {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) scaleX(1);
    -moz-transform: translateX(-100%) scaleX(1);
    -ms-transform: translateX(-100%) scaleX(1);
    -o-transform: translateX(-100%) scaleX(1);
    transform: translateX(-100%) scaleX(1);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateX(-100%) scaleX(1);
    -moz-transform: translateX(-100%) scaleX(1);
    -ms-transform: translateX(-100%) scaleX(1);
    -o-transform: translateX(-100%) scaleX(1);
    transform: translateX(-100%) scaleX(1);
  }
  99% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes endquery {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) scaleX(1);
    -moz-transform: translateX(-100%) scaleX(1);
    -ms-transform: translateX(-100%) scaleX(1);
    -o-transform: translateX(-100%) scaleX(1);
    transform: translateX(-100%) scaleX(1);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateX(-100%) scaleX(1);
    -moz-transform: translateX(-100%) scaleX(1);
    -ms-transform: translateX(-100%) scaleX(1);
    -o-transform: translateX(-100%) scaleX(1);
    transform: translateX(-100%) scaleX(1);
  }
  99% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes endquery {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) scaleX(1);
    -moz-transform: translateX(-100%) scaleX(1);
    -ms-transform: translateX(-100%) scaleX(1);
    -o-transform: translateX(-100%) scaleX(1);
    transform: translateX(-100%) scaleX(1);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateX(-100%) scaleX(1);
    -moz-transform: translateX(-100%) scaleX(1);
    -ms-transform: translateX(-100%) scaleX(1);
    -o-transform: translateX(-100%) scaleX(1);
    transform: translateX(-100%) scaleX(1);
  }
  99% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes indeterminate {
  0% {
    -webkit-transform: translateX(-100%) scaleX(0.2);
    -moz-transform: translateX(-100%) scaleX(0.2);
    -ms-transform: translateX(-100%) scaleX(0.2);
    -o-transform: translateX(-100%) scaleX(0.2);
    transform: translateX(-100%) scaleX(0.2);
  }
  20% {
    -webkit-transform: translateX(-40%) scaleX(0.2);
    -moz-transform: translateX(-40%) scaleX(0.2);
    -ms-transform: translateX(-40%) scaleX(0.2);
    -o-transform: translateX(-40%) scaleX(0.2);
    transform: translateX(-40%) scaleX(0.2);
  }
  30% {
    -webkit-transform: translateX(0%) scaleX(0.5);
    -moz-transform: translateX(0%) scaleX(0.5);
    -ms-transform: translateX(0%) scaleX(0.5);
    -o-transform: translateX(0%) scaleX(0.5);
    transform: translateX(0%) scaleX(0.5);
  }
  55% {
    -webkit-transform: translateX(100%) scaleX(0.7);
    -moz-transform: translateX(100%) scaleX(0.7);
    -ms-transform: translateX(100%) scaleX(0.7);
    -o-transform: translateX(100%) scaleX(0.7);
    transform: translateX(100%) scaleX(0.7);
  }
  55.99% {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
  }
  56% {
    -webkit-transform: translateX(-100%) scaleX(0);
    -moz-transform: translateX(-100%) scaleX(0);
    -ms-transform: translateX(-100%) scaleX(0);
    -o-transform: translateX(-100%) scaleX(0);
    transform: translateX(-100%) scaleX(0);
  }
  56.99% {
    -webkit-transform: translateX(-100%) scaleX(0.6);
    -moz-transform: translateX(-100%) scaleX(0.6);
    -ms-transform: translateX(-100%) scaleX(0.6);
    -o-transform: translateX(-100%) scaleX(0.6);
    transform: translateX(-100%) scaleX(0.6);
  }
  75% {
    -webkit-transform: translateX(-5%) scaleX(0.6);
    -moz-transform: translateX(-5%) scaleX(0.6);
    -ms-transform: translateX(-5%) scaleX(0.6);
    -o-transform: translateX(-5%) scaleX(0.6);
    transform: translateX(-5%) scaleX(0.6);
  }
  85% {
    -webkit-transform: translateX(30%) scaleX(0.3);
    -moz-transform: translateX(30%) scaleX(0.3);
    -ms-transform: translateX(30%) scaleX(0.3);
    -o-transform: translateX(30%) scaleX(0.3);
    transform: translateX(30%) scaleX(0.3);
  }
  98% {
    -webkit-transform: translateX(100%) scaleX(0.2);
    -moz-transform: translateX(100%) scaleX(0.2);
    -ms-transform: translateX(100%) scaleX(0.2);
    -o-transform: translateX(100%) scaleX(0.2);
    transform: translateX(100%) scaleX(0.2);
  }
  99.99% {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@-webkit-keyframes indeterminate {
  0% {
    -webkit-transform: translateX(-100%) scaleX(0.2);
    -moz-transform: translateX(-100%) scaleX(0.2);
    -ms-transform: translateX(-100%) scaleX(0.2);
    -o-transform: translateX(-100%) scaleX(0.2);
    transform: translateX(-100%) scaleX(0.2);
  }
  20% {
    -webkit-transform: translateX(-40%) scaleX(0.2);
    -moz-transform: translateX(-40%) scaleX(0.2);
    -ms-transform: translateX(-40%) scaleX(0.2);
    -o-transform: translateX(-40%) scaleX(0.2);
    transform: translateX(-40%) scaleX(0.2);
  }
  30% {
    -webkit-transform: translateX(0%) scaleX(0.5);
    -moz-transform: translateX(0%) scaleX(0.5);
    -ms-transform: translateX(0%) scaleX(0.5);
    -o-transform: translateX(0%) scaleX(0.5);
    transform: translateX(0%) scaleX(0.5);
  }
  55% {
    -webkit-transform: translateX(100%) scaleX(0.7);
    -moz-transform: translateX(100%) scaleX(0.7);
    -ms-transform: translateX(100%) scaleX(0.7);
    -o-transform: translateX(100%) scaleX(0.7);
    transform: translateX(100%) scaleX(0.7);
  }
  55.99% {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
  }
  56% {
    -webkit-transform: translateX(-100%) scaleX(0);
    -moz-transform: translateX(-100%) scaleX(0);
    -ms-transform: translateX(-100%) scaleX(0);
    -o-transform: translateX(-100%) scaleX(0);
    transform: translateX(-100%) scaleX(0);
  }
  56.99% {
    -webkit-transform: translateX(-100%) scaleX(0.6);
    -moz-transform: translateX(-100%) scaleX(0.6);
    -ms-transform: translateX(-100%) scaleX(0.6);
    -o-transform: translateX(-100%) scaleX(0.6);
    transform: translateX(-100%) scaleX(0.6);
  }
  75% {
    -webkit-transform: translateX(-5%) scaleX(0.6);
    -moz-transform: translateX(-5%) scaleX(0.6);
    -ms-transform: translateX(-5%) scaleX(0.6);
    -o-transform: translateX(-5%) scaleX(0.6);
    transform: translateX(-5%) scaleX(0.6);
  }
  85% {
    -webkit-transform: translateX(30%) scaleX(0.3);
    -moz-transform: translateX(30%) scaleX(0.3);
    -ms-transform: translateX(30%) scaleX(0.3);
    -o-transform: translateX(30%) scaleX(0.3);
    transform: translateX(30%) scaleX(0.3);
  }
  98% {
    -webkit-transform: translateX(100%) scaleX(0.2);
    -moz-transform: translateX(100%) scaleX(0.2);
    -ms-transform: translateX(100%) scaleX(0.2);
    -o-transform: translateX(100%) scaleX(0.2);
    transform: translateX(100%) scaleX(0.2);
  }
  99.99% {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@-o-keyframes indeterminate {
  0% {
    -webkit-transform: translateX(-100%) scaleX(0.2);
    -moz-transform: translateX(-100%) scaleX(0.2);
    -ms-transform: translateX(-100%) scaleX(0.2);
    -o-transform: translateX(-100%) scaleX(0.2);
    transform: translateX(-100%) scaleX(0.2);
  }
  20% {
    -webkit-transform: translateX(-40%) scaleX(0.2);
    -moz-transform: translateX(-40%) scaleX(0.2);
    -ms-transform: translateX(-40%) scaleX(0.2);
    -o-transform: translateX(-40%) scaleX(0.2);
    transform: translateX(-40%) scaleX(0.2);
  }
  30% {
    -webkit-transform: translateX(0%) scaleX(0.5);
    -moz-transform: translateX(0%) scaleX(0.5);
    -ms-transform: translateX(0%) scaleX(0.5);
    -o-transform: translateX(0%) scaleX(0.5);
    transform: translateX(0%) scaleX(0.5);
  }
  55% {
    -webkit-transform: translateX(100%) scaleX(0.7);
    -moz-transform: translateX(100%) scaleX(0.7);
    -ms-transform: translateX(100%) scaleX(0.7);
    -o-transform: translateX(100%) scaleX(0.7);
    transform: translateX(100%) scaleX(0.7);
  }
  55.99% {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
  }
  56% {
    -webkit-transform: translateX(-100%) scaleX(0);
    -moz-transform: translateX(-100%) scaleX(0);
    -ms-transform: translateX(-100%) scaleX(0);
    -o-transform: translateX(-100%) scaleX(0);
    transform: translateX(-100%) scaleX(0);
  }
  56.99% {
    -webkit-transform: translateX(-100%) scaleX(0.6);
    -moz-transform: translateX(-100%) scaleX(0.6);
    -ms-transform: translateX(-100%) scaleX(0.6);
    -o-transform: translateX(-100%) scaleX(0.6);
    transform: translateX(-100%) scaleX(0.6);
  }
  75% {
    -webkit-transform: translateX(-5%) scaleX(0.6);
    -moz-transform: translateX(-5%) scaleX(0.6);
    -ms-transform: translateX(-5%) scaleX(0.6);
    -o-transform: translateX(-5%) scaleX(0.6);
    transform: translateX(-5%) scaleX(0.6);
  }
  85% {
    -webkit-transform: translateX(30%) scaleX(0.3);
    -moz-transform: translateX(30%) scaleX(0.3);
    -ms-transform: translateX(30%) scaleX(0.3);
    -o-transform: translateX(30%) scaleX(0.3);
    transform: translateX(30%) scaleX(0.3);
  }
  98% {
    -webkit-transform: translateX(100%) scaleX(0.2);
    -moz-transform: translateX(100%) scaleX(0.2);
    -ms-transform: translateX(100%) scaleX(0.2);
    -o-transform: translateX(100%) scaleX(0.2);
    transform: translateX(100%) scaleX(0.2);
  }
  99.99% {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes indeterminate {
  0% {
    -webkit-transform: translateX(-100%) scaleX(0.2);
    -moz-transform: translateX(-100%) scaleX(0.2);
    -ms-transform: translateX(-100%) scaleX(0.2);
    -o-transform: translateX(-100%) scaleX(0.2);
    transform: translateX(-100%) scaleX(0.2);
  }
  20% {
    -webkit-transform: translateX(-40%) scaleX(0.2);
    -moz-transform: translateX(-40%) scaleX(0.2);
    -ms-transform: translateX(-40%) scaleX(0.2);
    -o-transform: translateX(-40%) scaleX(0.2);
    transform: translateX(-40%) scaleX(0.2);
  }
  30% {
    -webkit-transform: translateX(0%) scaleX(0.5);
    -moz-transform: translateX(0%) scaleX(0.5);
    -ms-transform: translateX(0%) scaleX(0.5);
    -o-transform: translateX(0%) scaleX(0.5);
    transform: translateX(0%) scaleX(0.5);
  }
  55% {
    -webkit-transform: translateX(100%) scaleX(0.7);
    -moz-transform: translateX(100%) scaleX(0.7);
    -ms-transform: translateX(100%) scaleX(0.7);
    -o-transform: translateX(100%) scaleX(0.7);
    transform: translateX(100%) scaleX(0.7);
  }
  55.99% {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
  }
  56% {
    -webkit-transform: translateX(-100%) scaleX(0);
    -moz-transform: translateX(-100%) scaleX(0);
    -ms-transform: translateX(-100%) scaleX(0);
    -o-transform: translateX(-100%) scaleX(0);
    transform: translateX(-100%) scaleX(0);
  }
  56.99% {
    -webkit-transform: translateX(-100%) scaleX(0.6);
    -moz-transform: translateX(-100%) scaleX(0.6);
    -ms-transform: translateX(-100%) scaleX(0.6);
    -o-transform: translateX(-100%) scaleX(0.6);
    transform: translateX(-100%) scaleX(0.6);
  }
  75% {
    -webkit-transform: translateX(-5%) scaleX(0.6);
    -moz-transform: translateX(-5%) scaleX(0.6);
    -ms-transform: translateX(-5%) scaleX(0.6);
    -o-transform: translateX(-5%) scaleX(0.6);
    transform: translateX(-5%) scaleX(0.6);
  }
  85% {
    -webkit-transform: translateX(30%) scaleX(0.3);
    -moz-transform: translateX(30%) scaleX(0.3);
    -ms-transform: translateX(30%) scaleX(0.3);
    -o-transform: translateX(30%) scaleX(0.3);
    transform: translateX(30%) scaleX(0.3);
  }
  98% {
    -webkit-transform: translateX(100%) scaleX(0.2);
    -moz-transform: translateX(100%) scaleX(0.2);
    -ms-transform: translateX(100%) scaleX(0.2);
    -o-transform: translateX(100%) scaleX(0.2);
    transform: translateX(100%) scaleX(0.2);
  }
  99.99% {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@-moz-keyframes buffer {
  0% {
    opacity: 1;
    background-position: 0px -23px;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    background-position: -200px -23px;
  }
}
@-webkit-keyframes buffer {
  0% {
    opacity: 1;
    background-position: 0px -23px;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    background-position: -200px -23px;
  }
}
@-o-keyframes buffer {
  0% {
    opacity: 1;
    background-position: 0px -23px;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    background-position: -200px -23px;
  }
}
@keyframes buffer {
  0% {
    opacity: 1;
    background-position: 0px -23px;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    background-position: -200px -23px;
  }
}
/* /libs/presentation/service-progress.css */
/* Product adapter only: pinned Mprogress template 3 and its keyframes are unchanged. */
body .twoip-service[data-service-progress-mode] { --twoip-service-progress-size: 4px; }
body .twoip-service .twoip-service-progress[data-service-progress-slot] {
  display: block; position: static; flex: 0 0 var(--twoip-service-progress-size);
  inline-size: 100%; block-size: var(--twoip-service-progress-size);
  min-block-size: var(--twoip-service-progress-size);
  pointer-events: none; visibility: hidden; opacity: 0;
  overflow: hidden; border-radius: calc(var(--twoip-service-progress-size) / 2);
  margin: 0; padding: 0;
}
body .twoip-service .twoip-service-progress[data-service-progress-slot][data-active=true] { visibility: visible; opacity: 1; }
body .twoip-service .twoip-service-progress[data-service-progress-slot] .ui-mprogress {
  position: relative; width: 100%; height: var(--twoip-service-progress-size); overflow: hidden; border-radius: calc(var(--twoip-service-progress-size) / 2);
}
body .twoip-service .twoip-service-progress[data-service-progress-slot] .ui-mprogress :is(.indeter-bar,.bar-bg) {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  height: var(--twoip-service-progress-size); border-radius: calc(var(--twoip-service-progress-size) / 2); z-index: 1; background: var(--twoip-primary);
}
body .twoip-service .twoip-service-progress[data-service-progress-slot] .ui-mprogress .bar-bg { z-index: 0; background: var(--twoip-primary-container); }
body .twoip-service .twoip-service-progress[data-service-progress-slot] .peg { display: none; }
body .twoip-service .twoip-service-progress[data-service-progress-slot] .indeter-bar { animation-play-state: paused; }
body .twoip-service .twoip-service-progress[data-service-progress-slot][data-active=true] .indeter-bar { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  body .twoip-service .twoip-service-progress[data-service-progress-slot] .indeter-bar { animation: none; transform: scaleX(.35); transform-origin: left; }
}

/* /templates/2ip/css/responsive.css */
/* Adopted component notices and maintained-source provenance:
 * libs/presentation/THIRD-PARTY-NOTICES.txt; docs/frontend-asset-provenance.md.
 * 2ip modifications include split product styling and Bootstrap5 selectors. */
/* Advertising alignment only; creative dimensions and vertical spacing stay native. */
body :is(.custom_adsense, .twoip-results-ad) { margin-inline: 0; text-align: center; }
/* Configured slots include inline display:inline-block; block flow makes auto margins
 * work in article/review parents without centering their surrounding text. */
body ins.adsbygoogle:not([data-ad-status="unfilled"]) { display: block !important; }
body .adsbygoogle { margin-inline: auto; text-align: center; }
body .twoip-header-ad-creative { grid-template-columns: minmax(0, 1fr); }
body .adsbygoogle > :is(div, iframe) { margin-inline: auto; }
.t3-wrapper .cookie-banner {
  position: fixed;
  bottom: -200px;
  left: 0;
  width: 100%;
  border-radius: 2px;
  background: var(--twoip-surface);
  border-color: var(--twoip-outline-variant) var(--twoip-outline-variant) var(--twoip-outline-variant);
  z-index: 9999;
  opacity: 0;
  transition: bottom 0.5s ease, opacity 0.5s ease;
  padding: 15px 20px;
}
.t3-wrapper .cookie-banner.show {
  bottom: 0;
  opacity: 1;
}
.t3-wrapper .cookie-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--twoip-on-surface);
}
.t3-wrapper .cookie-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 30px;
}
@media screen and (max-width: 767px) {
  .t3-wrapper .cookie-content {
    display: block;
  }
  .t3-wrapper .cookie-buttons {
    gap: 10px;
    padding-top: 15px;
  }
}
/* /templates/2ip/css/messages.css */
/* Joomla system messages belong to the same content column as the page. */
.t3-page-content--home:has(#system-message-container joomla-alert) {
  margin-top: 0;
}

#system-message-container:has(joomla-alert) {
  margin-bottom: 16px;
}

#system-message-container joomla-alert {
  --jui-alert-min-width: 0;
  --jui-alert-padding: 14px 48px 14px 18px;
  --jui-alert-margin: 0 0 12px;
  --jui-alert-border-radius: 2px;
  --jui-alert-button-color-dark: var(--twoip-on-surface-variant);
  position: relative;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--twoip-on-surface) 12%, transparent);
  border: 1px solid var(--twoip-outline-variant);
  border-left: 4px solid var(--twoip-primary);
  background: var(--twoip-surface);
  color: var(--twoip-on-surface);
  font-family: '2ip-light', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

#system-message-container joomla-alert[type="success"] {
  border-left-color: var(--twoip-success);
}
#system-message-container joomla-alert[type="info"] {
  border-left-color: var(--twoip-account-primary);
}
#system-message-container joomla-alert[type="warning"] {
  border-left-color: var(--twoip-warning);
}
#system-message-container joomla-alert[type="danger"] {
  border-left-color: var(--twoip-error);
}

#system-message-container joomla-alert .alert-heading {
  margin: 0 0 2px;
  color: var(--twoip-account-primary);
  font-size: 16px;
  font-weight: 600;
}

#system-message-container joomla-alert[type="warning"] .alert-heading {
  color: var(--twoip-warning);
}
#system-message-container joomla-alert[type="danger"] .alert-heading {
  color: var(--twoip-error);
}
#system-message-container joomla-alert .alert-heading > span:first-child { display: none; }

#system-message-container joomla-alert .alert-heading .visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

#system-message-container joomla-alert .alert-wrapper,
#system-message-container joomla-alert .alert-message { margin: 0; }

#system-message-container joomla-alert .alert-message {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow-wrap: anywhere;
}

#system-message-container joomla-alert .joomla-alert--close {
  position: absolute;
  top: 8px;
  right: 8px;
  float: none;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--twoip-on-surface-variant);
  opacity: 1;
  text-shadow: none;
  border-radius: 2px;
}

#system-message-container joomla-alert .joomla-alert--close:hover,
#system-message-container joomla-alert .joomla-alert--close:focus {
  color: var(--twoip-account-primary);
  background: var(--twoip-primary-container);
  opacity: 1;
}

html[dir="rtl"] #system-message-container joomla-alert .joomla-alert--close {
  right: auto;
  left: 8px;
}

@media (max-width: 480px) {
  #system-message-container joomla-alert { font-size: 14px; }
}

/* /templates/2ip/css/shared-ui.css */
/* First-party shared 2ip UI. Bootstrap owns mechanics; FA7 owns glyphs.
 * Specialized results and portable packages keep their own layout contracts. */
html { background: var(--twoip-surface-container); }
body {
  color: var(--twoip-on-surface);
  background: var(--twoip-surface-container);
  font-family: "2ip", Roboto, sans-serif;
  font-size: var(--twoip-type-body);
  line-height: 1.45;
}
body :is(h1,.h1) { font-size: var(--twoip-type-headline); line-height: 1.2; }
body :is(h2,.h2) { font-size: 26px; line-height: 1.25; }
body :is(h3,.h3) { font-size: 22px; line-height: 1.3; }
body :is(h4,.h4,.module-title) { font-size: var(--twoip-type-title); line-height: 1.3; }
body :is(h1,h2,h3,h4,h5,h6) { font-family: "2ip", Roboto, sans-serif; }
body :is(.text-muted,.twoip-help-block) { color: var(--twoip-on-surface-variant); }
body :is(a,button,input,textarea,select,[tabindex]):focus-visible {
  outline: 2px solid var(--twoip-control-focus, var(--twoip-primary));
  outline-offset: 3px;
}
body a { transition: color .15s ease, background-color .15s ease; }
body ::selection { color: var(--twoip-on-primary-container); background: var(--twoip-primary-container); }
body .t3-content, body .t3-sl-helper-wrap {
  background: var(--twoip-surface);
  border: 0;
  border-radius: var(--twoip-radius-medium);
  box-shadow: none;
}
body .t3-navhelper { color: var(--twoip-on-surface-variant); background: var(--twoip-surface-container); }
body .breadcrumb { font-size: var(--twoip-type-label); }
@media (prefers-reduced-motion: reduce) {
  body *:not(:where(.twoip-chevron,.twoip-accordion-icon,.twoip-disclosure-arrow)), body *:not(:where(.twoip-chevron,.twoip-accordion-icon,.twoip-disclosure-arrow))::before, body *:not(:where(.twoip-chevron,.twoip-accordion-icon,.twoip-disclosure-arrow))::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* One inline primitive: neutral default ink, semantic lines, synchronized states. */
.twoip-inline-link {
  --twoip-inline-border-style: solid;
  --twoip-inline-border: var(--twoip-link-border);
  --twoip-inline-pressed: var(--twoip-link-pressed);
  color: var(--twoip-link-text); text-decoration: none;
  border: 0; border-bottom: 1px var(--twoip-inline-border-style) var(--twoip-inline-border);
  padding-bottom: 1px; cursor: pointer; box-decoration-break: clone; font: inherit;
  transition: color .15s ease, border-color .15s ease;
}
.twoip-inline-link--action {
  --twoip-inline-border-style: dotted;
  --twoip-inline-border: var(--twoip-link-action-border);
  --twoip-inline-pressed: var(--twoip-link-action-pressed);
}
.twoip-inline-link:is(:hover,:focus-visible,:active,:visited) { text-decoration: none; }
.twoip-inline-link:visited { color: var(--twoip-link-text); }
.twoip-inline-link:is(:hover,:focus-visible) { color: var(--twoip-inline-hover); border-bottom-color: var(--twoip-inline-hover); }
.twoip-inline-link:active { color: var(--twoip-inline-pressed); border-bottom-color: var(--twoip-inline-pressed); }
.twoip-inline-link:focus-visible { outline: 2px solid var(--twoip-link-focus); outline-offset: 3px; }
.twoip-inline-link.twoip-inline-link--with-label { border-bottom: 0; }
.twoip-inline-link--with-label .twoip-inline-label:has(.twoip-inline-label) { border-bottom: 0; }
.twoip-inline-link--with-label .twoip-inline-label:not(:has(.twoip-inline-label)) { text-decoration: none; color: inherit; border-bottom: 1px var(--twoip-inline-border-style) var(--twoip-inline-border); padding-bottom: 1px; box-decoration-break: clone; }
.twoip-inline-link--with-label:is(:hover,:focus-visible) .twoip-inline-label:not(:has(.twoip-inline-label)) { border-bottom-color: var(--twoip-inline-hover); }
.twoip-inline-link--with-label:active .twoip-inline-label:not(:has(.twoip-inline-label)) { border-bottom-color: var(--twoip-inline-pressed); }
.twoip-inline-link > .twoip-panel-title { color: inherit; }
.twoip-inline-link :is(.twoip-icon,.twoip-disclosure-arrow) { display: inline-block; border: 0; color: currentColor; text-decoration: none; }
/* Ordinary link glyphs share every foreground state with their text. Disclosure/state/action icons are separate. */
body .twoip-inline-link:not(.twoip-disclosure-control):not(.twoip-sort-control) > .twoip-icon:not([data-twoip-status]):not(.twoip-disclosure-arrow) { color: currentColor; }
/* Ordinary service data/action links: text only; leaf-label underline. */
body .twoip-service-navigation-link { display: inline-flex; align-items: center; gap: 4px; max-inline-size: 100%; min-inline-size: 0; vertical-align: middle; }
body .twoip-service-navigation-link > .twoip-inline-label { min-inline-size: 0; overflow-wrap: anywhere; }
/* Same FA7 slot for vertical state glyphs; component families own their scale. */
body :is(.twoip-chevron,.twoip-disclosure-arrow) {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 var(--twoip-chevron-size, 12px);
  width: var(--twoip-chevron-size, 12px); height: var(--twoip-chevron-size, 12px);
  font-size: var(--twoip-chevron-size, 12px); line-height: 1;
  position: static; margin: 0; padding: 0; color: inherit;
}
body .twoip-accordion-icon { --twoip-chevron-size: 16px; }
body :is(.twoip-form-select-trigger,.twoip-select-control) { --twoip-chevron-size: var(--twoip-select-icon-size); }
/* Lightweight content disclosure, distinct from accordion/nav/form buttons. */
body .twoip-disclosure-control { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; max-inline-size: 100%; padding: 6px 0; margin: 0; border: 0; color: var(--twoip-on-surface); background: transparent; box-shadow: none; font-family: inherit; font-size: var(--twoip-type-body); line-height: 22px; text-align: start; cursor: pointer; list-style: none; }
body .twoip-disclosure-control .twoip-disclosure-arrow { --twoip-chevron-size: 16px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 16px; inline-size: 16px; block-size: 16px; margin: 0; position: static; font-size: 16px; line-height: 1; color: currentColor; }
.twoip-disclosure-control::-webkit-details-marker { display: none; }
body .twoip-disclosure-control:is(:hover,:focus-visible) { background: transparent; box-shadow: none; color: var(--twoip-inline-hover); }
body .twoip-disclosure-control:active { background: transparent; color: var(--twoip-link-action-pressed); }
body .twoip-disclosure-control:focus-visible { outline: 2px solid var(--twoip-link-focus); outline-offset: 3px; }

/* The same disclosure control, with an opt-in two-line prose preview. */
body .twoip-text-disclosure { --twoip-disclosure-text-lines: 2; --twoip-disclosure-text-duration: 200ms; min-inline-size: 0; }
body .twoip-text-disclosure__content { white-space: normal; overflow-wrap: anywhere; overflow: hidden; }
body .twoip-text-disclosure[data-twoip-text-expanded=false] > .twoip-text-disclosure__content {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--twoip-disclosure-text-lines);
}
body .twoip-text-disclosure > [hidden] { display: none; }


/* Shell and navigation retain their established columns and disclosure mechanics. */
body .t3-wrapper { background: var(--twoip-surface-container); }
body .t3-header {
  background: var(--twoip-surface);
  box-shadow: none;
  border-bottom: 1px solid var(--twoip-outline-variant);
  padding: 8px 0;
}
body .twoip-header-row {
  --twoip-header-language-size: 76px; --twoip-header-theme-size: 52px;
  --twoip-header-account-size: 44px; --twoip-header-account-slot: 44px;
  --twoip-header-utility-gap: 12px; --twoip-header-ad-height: 90px;
  --twoip-header-utilities-width: calc(var(--twoip-header-language-size) + var(--twoip-header-theme-size) + var(--twoip-header-account-slot) + 2 * var(--twoip-header-utility-gap));
  padding-bottom: 0; align-items: center;
}
@media (min-width: 1100px) {
  body .twoip-header-row { display: grid; grid-template-columns: var(--twoip-header-logo-width) minmax(0, 1fr) calc(var(--twoip-header-utilities-width) + var(--bs-gutter-x)); column-gap: 16px; padding-inline: 12px; }
  body .twoip-header-row > .twoip-current-grid { width: auto; min-width: 0; }
}
body .adsbygoogle { max-width: 100%; }
body .t3-header .header-ad-slot { inline-size:100%; max-inline-size:728px; block-size:var(--twoip-header-ad-height); min-block-size:var(--twoip-header-ad-height); max-block-size:var(--twoip-header-ad-height); margin-inline:auto; display:grid; place-items:center; line-height:0; overflow:hidden; }
body .t3-header .twoip-header-ad-creative { inline-size:100%; block-size:100%; min-inline-size:0; max-block-size:100%; display:grid; place-items:center; contain:size layout paint; isolation:isolate; overflow:hidden; }
body .t3-header .twoip-header-ad-creative :is(img,video,iframe,ins) { max-inline-size:100%!important; max-block-size:var(--twoip-header-ad-height)!important; min-inline-size:0!important; min-block-size:0!important; }
body .t3-header .twoip-header-ad-creative :is(img,video) { object-fit:contain; }
@media(max-width:767px){ body .twoip-header-row { --twoip-header-ad-height:160px; } }
body .t3-header .header-ad-slot .adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

body .t3-header .logo a { display: inline-flex; vertical-align: top; align-items: center; gap: 8px; color: var(--twoip-primary); text-decoration: none; }
/* Reserve the three utility slots even while their module markup is being parsed. */
body .t3-header .header-utilities { display: grid; grid-template-columns: var(--twoip-header-language-size) var(--twoip-header-theme-size) var(--twoip-header-account-slot); align-items: center; justify-content: end; gap: var(--twoip-header-utility-gap); top: 0; }
body .t3-header .header-utilities > .languageswitcherload { grid-column: 1; grid-row: 1; }
body .t3-header .header-utilities > .twoip-theme-switcher { grid-column: 2; grid-row: 1; }
body .t3-header .header-utilities > :is(.account-lg,.account-mob) { grid-column: 3; grid-row: 1; }
body .t3-header .twoip-language-toggle { inline-size: var(--twoip-header-language-size); }
body .t3-header .twoip-theme-toggle { inline-size: var(--twoip-header-theme-size); }
body .t3-header .header-utilities .account a { inline-size: var(--twoip-header-account-size); }
/* Native language links use the same source as the previous inline selector. */
body .twoip-selector-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 10px; border: 0; border-radius: var(--twoip-radius-small);
  color: var(--twoip-primary); background: transparent; font: inherit; font-size: 14px;
}
body .twoip-selector-toggle::after { display: none; }
body .twoip-selector-list {
    margin-top: 6px !important;
    padding: 4px;
    max-width: calc(100vw - 24px);
    max-height: min(60vh, 360px);
    min-width: 240px;
    background: var(--twoip-surface);
    border-color: var(--twoip-outline-variant);
    border-radius: var(--twoip-radius-medium);
    box-shadow: var(--twoip-elevation-2);
}
body .twoip-selector .dropdown-menu:not(.show) { display: none; }
body .twoip-selector-list:not(.twoip-city-popup--searchable) {
    overflow-y: auto;
}
body .twoip-selector-list .dropdown-item { color: var(--twoip-on-surface); min-height: 48px; padding: 10px 12px; gap: 10px; border-radius: var(--twoip-radius-small); display: flex; align-items: center; white-space: normal; word-break: normal; text-decoration: none; }
body .twoip-selector-list .twoip-icon { color: currentColor; font-size: 18px; margin: 0; position: static; }
body .twoip-selector-item-icon { width: 18px; flex: 0 0 18px; text-align: center; }
body .twoip-selector-check { width: 18px; flex: 0 0 18px; }
body .twoip-selector-name { flex: 1 1 auto; min-width: 0; }
body .twoip-selector-code { flex: 0 0 auto; font-size: 13px; color: var(--twoip-on-surface-variant); }
body .twoip-selector-list .dropdown-item:is(:hover,:focus,.active,.is-active,[aria-selected="true"]) { color: var(--twoip-on-primary-container); background: var(--twoip-primary-container); }
body .t3-page-content--home { margin-top: 0; }
body .t3-mainnav .t3-navbar { top: 16px; width: auto; left: 9px; right: 9px; margin: 0; }
body .t3-mainnav .t3-navbar .sidebar-nav > li > a:not(.menu_banner),
body .t3-off-canvas .sidebar-nav > li > a:not(.menu_banner) {
  font-family: "2ip"; font-size: 16px; line-height: 22px; min-height: 44px; padding: 8px 10px;
  color: var(--twoip-on-surface); border-radius: var(--twoip-radius-small); box-shadow: none;
}
body :is(.t3-mainnav .t3-navbar,.t3-off-canvas) .sidebar-nav a:not(.menu_banner) { display: flex; align-items: center; gap: 6px; text-decoration: none; }
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav .twoip-menu-label { min-width: 0; flex: 1 1 auto; word-break: normal; overflow-wrap: normal; white-space: normal; }
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav .hang { margin-inline-start: auto; flex: 0 0 12px; width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 12px; line-height: 1; }
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav .hang::before { position: static; content: var(--fa, "\f078"); font-size: inherit; padding: 0; }

body .t3-mainnav .t3-navbar .sidebar-nav > li.active > a:not(.menu_banner),
body .t3-mainnav .t3-navbar .sidebar-nav > li.open > a,
body .t3-off-canvas .sidebar-nav > li.active > a,
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav > li:is(.active,.open) > a.menu-head {
  color: var(--twoip-on-primary); background: var(--twoip-hero-start); box-shadow: none; font-weight: 500;
}
body .t3-mainnav .t3-navbar .sidebar-nav .open { background: transparent; }
/* Icons describe existing top-level route roles; nested links remain compact text. */
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav > [class*="twoip-menu-role-"] > a::before {
  font-family: "Font Awesome 7 Free"; font-weight: 900; font-size: 18px;
  width: var(--twoip-navigation-icon-slot); flex: 0 0 var(--twoip-navigation-icon-slot); text-align: center; color: currentColor;
}
body .twoip-menu-role-home > a::before { content: "\f015"; }
body .twoip-menu-role-services > a::before { content: "\f00a"; }
body .twoip-menu-role-api > a::before { content: "\f121"; }
body .twoip-menu-role-blog > a::before { content: "\f15c"; }
body .twoip-menu-role-site > a::before { content: "\f108"; }
body .twoip-menu-role-agreements > a::before { content: "\f3ed"; }

body .t3-mainnav .t3-navbar .sidebar-nav li:not(.active):not(.open) > a:not(.menu_banner):hover,
body .t3-off-canvas .sidebar-nav li:not(.active):not(.open) > a:hover {
  color: var(--twoip-on-primary-container); background: var(--twoip-surface-container-high); box-shadow: none;
}
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav .twoip-submenu {
  position: static; float: none; min-width: 0; width: auto; margin: 3px 0 5px 4px;
  background: transparent; border: 0; border-left: 1px solid var(--twoip-outline-variant);
  border-radius: 0; box-shadow: none; padding: 0 0 0 2px;
}
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav .twoip-submenu li > a {
  color: var(--twoip-on-surface); font-size: 14px; line-height: 19px; white-space: normal; border-radius: var(--twoip-radius-small); padding: 6px;
}
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav .twoip-submenu li.active > a {
  background: var(--twoip-primary-container); color: var(--twoip-on-primary-container);
}
body .t3-off-canvas { scrollbar-gutter: stable; background: var(--twoip-surface); border-radius: 0 var(--twoip-radius-large) var(--twoip-radius-large) 0; }
body .twoip-mobile-menu-trigger { display: none; }
body .off-canvas-toggle { display: grid; place-items: center; width: 44px; height: 44px; font-size: 20px; line-height: 1; color: var(--twoip-primary); border-radius: var(--twoip-radius-full); }
body :is(.account-mob,.account-lg) .account .twoip-icon {
  box-sizing: border-box; background: transparent; color: var(--twoip-primary); box-shadow: none;
  border-radius: var(--twoip-radius-small);
}
@media (max-width: 1099px) {
  body .twoip-mobile-menu-trigger { display: block; }
  body .t3-header { padding-top: 6px; }
  body .twoip-header-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--twoip-header-utilities-width); --twoip-header-utility-gap: 4px; gap: 4px 8px; padding-left: 44px; padding-right: 4px; }
  body .t3-header .logo {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    width: auto;
    padding: 0;
    margin: 0;
    text-align: center;
    align-self: center;
  }
  body .t3-header .logo a { position: static; gap: 4px; max-width: 100%; }
  /* Share the logo row center; the logo footprint and header height stay stable. */
  body .t3-header .logo .off-canvas-toggle { position: absolute; left: -44px; top: 50%; transform: translateY(-50%); padding: 0; }
  body .off-canvas-toggle:is(:hover,:focus-visible) { background: var(--twoip-primary-container); color: var(--twoip-on-primary-container); }
  body .t3-header .header-utilities { gap: 4px; grid-column: 2; grid-row: 1; width: auto; padding: 0; }
  body .t3-header .header-ad-column { grid-column: 1 / -1; grid-row: 2; width: calc(100% + 44px); margin-left: -44px; padding: 0; }
  body .t3-header .top-banner { margin-bottom: 0; }
  body .account-mob .account { width: 44px; height: 44px; margin-top: 0; background: transparent; transform: none; }
  body .account-mob .account a { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0; top: 0; font-size: 20px; }
  body .account-mob .account a span { display: none; }
}


/* Compact header owns its visual glyph scale independently of text/control fonts. */
@media (max-width: 767px) {
  body .twoip-header-row {
    --twoip-mobile-header-icon-size: 24px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) var(--twoip-header-utilities-width);
    --twoip-header-language-size: 66px; --twoip-header-theme-size: 44px; --twoip-header-account-slot: 49px;
    align-items: center;
    gap: 4px;
    padding-inline: 0 4px;
  }
  body .t3-header .logo {
    display: contents;
  }
  body .twoip-mobile-menu-trigger {
    grid-column: 1;
    grid-row: 1;
  }
  body .t3-header .logo-image {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding-inline-start: 4px;
    text-align: left;
  }
  body .t3-header .logo .off-canvas-toggle {
    position: static;
    inset: auto;
    transform: none;
  }
  body .t3-header .header-utilities {
    grid-column: 3;
  }
  body .t3-header .account-mob.twoip-header-account-divider {
    display: flex;
    align-items: center;
    height: 28px;
    padding-inline-start: 4px;
  }
  body .t3-header .header-ad-column {
    width: 100%;
    margin-inline: 0;
  }
  body .t3-header .header-ad-column > .row {
    margin-inline: 0;
  }
  body .t3-header :is(.twoip-language-toggle,.twoip-theme-toggle) {
    gap: 4px;
    padding-inline: 0;
  }
  body .t3-header :is(.off-canvas-toggle,.twoip-selector-toggle) > .twoip-icon:not(.twoip-disclosure-arrow) {
    display: inline-grid;
    place-items: center;
    width: var(--twoip-mobile-header-icon-size);
    height: var(--twoip-mobile-header-icon-size);
    font-size: var(--twoip-mobile-header-icon-size);
    line-height: 1;
  }
  body .t3-header .account-mob .account {
    --twoip-account-icon-size: var(--twoip-mobile-header-icon-size);
    --twoip-account-icon-gap: 0px;
    --twoip-account-icon-position: static;
    display: flex;
    align-items: center;
  }
  body .t3-header .account-mob .account a {
    font-size: var(--twoip-mobile-header-icon-size);
    line-height: 1;
  }
}

body .twoip-header-account-divider {
  border-inline-start: 1px solid var(--twoip-outline-variant);
}
@media (min-width: 768px) and (max-width: 1099px) {
  body .account-mob.twoip-header-account-divider {
    border-inline-start: 0;
  }
}
body .account-lg { padding-left: 8px; }
body .account-lg .account { position: static; background: transparent; width: fit-content; height: auto; margin: 0; transform: none; }
body .account-lg .account .twoip-icon { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; text-decoration: none; padding: 8px 12px; margin: 0; top: 0; font-size: 18px; }
body .account-lg .account span { color: inherit; font-family: "2ip"; font-size: 14px; line-height: 20px; margin: 0; }
/* Header control surfaces share states; their labels are not inline links. */
body .t3-header .header-utilities :is(.twoip-language-toggle,.twoip-theme-toggle,.account a) {
  min-width: 44px; min-height: 44px; border: 0; border-radius: var(--twoip-radius-small);
  color: var(--twoip-primary); background: transparent; text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
body .t3-header .header-utilities :is(.twoip-language-toggle,.twoip-theme-toggle,.account a):is(:hover,:focus-visible) {
  color: var(--twoip-on-primary-container); background: var(--twoip-primary-container);
}
body .t3-header .header-utilities :is(.twoip-language-toggle,.twoip-theme-toggle,.account a):active,
body .t3-header .header-utilities .twoip-selector-toggle[aria-expanded="true"] {
  color: var(--twoip-on-primary-container); background: var(--twoip-surface-container-high);
}
body .t3-header .header-utilities :is(.twoip-language-toggle,.twoip-theme-toggle,.account a) :is(span,i) { color: inherit; text-decoration: none; border: 0; }


/* Desktop utilities share one scale; mobile retains its compact geometry. */
@media (min-width: 1100px) {
  body .twoip-header-row { --twoip-header-language-size: 104px; --twoip-header-theme-size: 68px; --twoip-header-account-size: 104px; --twoip-header-account-slot: 129px; --twoip-header-utility-gap: 16px; }
  body .t3-header .header-utilities :is(.twoip-language-toggle,.twoip-theme-toggle,.account a) {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; height: 48px; padding: 8px 12px; gap: 8px; font-size: 16px; line-height: 20px;
  }
  body .t3-header .header-utilities .twoip-icon,
  body .t3-header .header-utilities .account .twoip-icon { font-size: 20px; position: static; margin: 0; }
  body .t3-header .header-utilities .account a span { font-size: 16px; line-height: 20px; }
  body .t3-header .header-utilities .account-lg { display: flex; align-items: center; align-self: center; }
}

/* Theme state comes from the pre-styles root preference, never a late glyph swap. */
body .t3-header [data-theme-mode-icon] { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; flex: 0 0 1em; line-height: 1; position: static; margin: 0; }
:root[data-theme-preference="light"] [data-theme-mode-icon]::before { content: "\f185"; }
:root[data-theme-preference="dark"] [data-theme-mode-icon]::before { content: "\f186"; }
:root[data-theme-preference="auto"] [data-theme-mode-icon]::before { content: "\f042"; }

/* IP hero: primary data above compact, readable secondary information. */
body .ipblock .showip_mod {
  --twoip-hero-ipv4-size: clamp(36px, 4.5vw, 52px);
  --twoip-hero-ipv6-size: clamp(16px, 3.5vw, 24px);
  --twoip-hero-ipv6-lines: 1;
  --twoip-hero-copy-size: 40px;
  font-family: "2ip"; color: var(--twoip-on-primary); background: var(--twoip-primary);
  border: 1px solid var(--twoip-primary); border-radius: var(--twoip-radius-large); overflow: hidden;
}
body .ipblock .showip_mod .ipblockgradient { background: linear-gradient(110deg, var(--twoip-hero-start), var(--twoip-hero-end)); box-shadow: none; padding: 24px 0 0; }
body .ipblock .showip_mod .iptitle { font-size: 18px; color: var(--twoip-on-primary); }
body .ipblock .showip_mod .ip:not(.ipv6) {
  color: var(--twoip-on-primary); font-family: "2ip-roboto", Roboto, sans-serif;
  font-size: var(--twoip-hero-ipv4-size); line-height: 1.25; margin-bottom: 24px;
  font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.025em;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
body .ipblock .showip_mod .ip.ipv6 { color: var(--twoip-on-primary); }
body .ipblock .showip_mod .ip.ipv6 .ipv6addr { font-size: var(--twoip-hero-ipv6-size); line-height: 1.4; color: var(--twoip-on-primary); overflow-wrap: anywhere; }
body .ipblock .showip_mod .ip :is(.copy-clipboard,.copy-clipboard-v6) {
  display: inline-grid;
  place-items: center;
  position: static;
  vertical-align: middle;
  width: var(--twoip-hero-copy-size);
  height: var(--twoip-hero-copy-size);
  padding: 0;
  margin-left: 4px;
  border: 0;
  border-radius: var(--twoip-radius-full);
  font-size: 18px;
  line-height: 1;
  color: var(--twoip-button-on-primary);
  background: var(--twoip-primary);
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
body .ipblock .showip_mod .ip :is(.copy-clipboard,.copy-clipboard-v6):is(:hover,:focus-visible) {
  color: var(--twoip-on-primary-container);
  background: var(--twoip-copy-hover);
}
body .ipblock .showip_mod .ip :is(.copy-clipboard,.copy-clipboard-v6):active {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--twoip-scrim) 18%, transparent);
}
body .ipblock .showip_mod .ipblockgradient > .row:has(> :is(.ipblockgrid,.s-ipblockgrid)) { background: var(--twoip-hero-data); padding-block: 1px; }
body .ipblock .showip_mod :is(.ipblockgrid,.s-ipblockgrid) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(var(--twoip-info-rows, 2), 1fr); grid-auto-rows: 1fr; gap: 1px; padding: 0; margin: 12px; width: calc(100% - 24px); background: var(--twoip-hero-divider); --twoip-info-icon-size: 22px; --twoip-info-label-font-size: 13px; --twoip-info-label-line-height: 1.45; --twoip-info-value-font-size: 14px; --twoip-info-line-height: 1.45; --twoip-info-value-block-size: calc(2 * var(--twoip-info-value-font-size) * var(--twoip-info-line-height) + 2px); --twoip-info-content-block-size: calc(var(--twoip-info-label-font-size) * var(--twoip-info-label-line-height) + var(--twoip-info-value-block-size)); }
body .ipblock .showip_mod :is(.ipblockgrid,.s-ipblockgrid) > div { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-content: center; width: auto; min-width: 0; min-height: 76px; padding: 9px 12px 9px 10px; border: 0; background: var(--twoip-hero-data); }
body .ipblock .showip_mod .s-ipblockgrid { --twoip-info-rows: 1; }
body .ipblock .showip_mod :is(.ipblockgrid,.s-ipblockgrid) > div {
  text-align: left;
}
/* Allocate the caption and two-line value slots before children parse. The
   inert reserve is never announced or painted; settling cannot move icons. */
body .ipblock .showip_mod .twoip-info-reserve { grid-column: 2; grid-row: 1; visibility: hidden; font-size: var(--twoip-info-label-font-size); block-size: var(--twoip-info-content-block-size); overflow-wrap: anywhere; }
body .ipblock .showip_mod .twoip-info-reserve::before { content: attr(data-label); display: block; block-size: 1lh; white-space: nowrap; overflow: hidden; }
body .ipblock .showip_mod .twoip-info-reserve::after { content: ""; display: block; block-size: var(--twoip-info-value-block-size); }
body .ipblock .showip_mod .twoip-info-content { grid-column: 1 / -1; grid-row: 1; align-self: start; block-size: var(--twoip-info-content-block-size); display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; }
body .ipblock .showip_mod .twoip-info-text { min-width: 0; align-self: start; block-size: var(--twoip-info-content-block-size); }
body .ipblock .showip_mod .twoip-info-icon { display: grid; place-items: center; align-self: start; margin-block-start: calc((var(--twoip-info-label-font-size) * var(--twoip-info-label-line-height) + var(--twoip-info-value-font-size) * var(--twoip-info-line-height) - var(--twoip-info-icon-size)) / 2); inline-size: 32px; block-size: var(--twoip-info-icon-size); color: var(--twoip-primary); font-size: var(--twoip-info-icon-size); line-height: 1; }
body .ipblock .showip_mod .twoip-info-icon::before { content: var(--twoip-info-glyph); font-family: var(--twoip-info-icon-family); font-weight: var(--twoip-info-icon-weight); line-height: 1; }
body .ipblock .showip_mod :is(.ipblockgrid,.s-ipblockgrid) :is(.name,.result) { margin-left: 0; }
body .ipblock .showip_mod :is(.ipblockgrid,.s-ipblockgrid) .name { display: block; color: var(--twoip-on-surface-variant); font-size: var(--twoip-info-label-font-size); line-height: var(--twoip-info-label-line-height); block-size: 1lh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .ipblock .showip_mod :is(.ipblockgrid,.s-ipblockgrid) .result { color: var(--twoip-on-surface); font-size: var(--twoip-info-value-font-size); line-height: var(--twoip-info-line-height); font-weight: 600; block-size: var(--twoip-info-value-block-size); display: block; }
body .ipblock .showip_mod :is(.cli,.iphistory) { display: inline-flex; align-items: center; gap: 4px; color: var(--twoip-on-primary); --twoip-link-text: var(--twoip-on-primary); --twoip-link-border: var(--twoip-on-primary); --twoip-link-action-border: var(--twoip-link-action-on-primary); --twoip-inline-hover: var(--twoip-inline-hover-on-primary); --twoip-link-action-pressed: var(--twoip-link-action-on-primary-pressed); --twoip-link-pressed: var(--twoip-link-action-on-primary-pressed); --twoip-link-focus: var(--twoip-on-primary); }
body .ipblock .showip_mod :is(.cli,.iphistory) .twoip-icon { font-size: 16px; top: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1em; flex: 0 0 1.25em; line-height: 1; }
body .ipblock .showip_mod :is(.cli,.iphistory) button {
  background: transparent; border: 0;
  padding: 4px 8px; min-height: 40px; font: inherit; display: inline-flex; align-items: center; gap: 6px; text-decoration: none !important;
}
body .ipblock .showip_mod :is(.cli,.iphistory,.ip) button:focus-visible { outline-color: var(--twoip-on-primary); }
@media (max-width: 767px) { body .ipblock .showip_mod :is(.ipblockgrid,.s-ipblockgrid) { grid-template-columns: repeat(2, minmax(0, 1fr)); --twoip-info-rows: 4; }
body .ipblock .showip_mod .s-ipblockgrid { --twoip-info-rows: 2; }
  /* Reserve the touch target at the mobile breakpoint before pointer initialization. */
  body .ipblock .showip_mod :is(.cli,.iphistory) button { min-height: 44px; }
}
@media (max-width: 480px) {
  body .ipblock .showip_mod { --twoip-hero-ipv4-size: clamp(28px, 9vw, 36px); --twoip-hero-ipv6-lines: 2; --twoip-hero-copy-size: 44px; }
  body .ipblock .showip_mod .iphistory { position: relative; top: 0; }
}

/* Hero CLI follows the shared desktop layout boundary; no hidden layout slot. */
@media (max-width: 1099px) { body .ipblock .showip_mod .cli { display: none; } }

/* Ordinary labeled buttons: four semantic palettes, one geometry/state model.
   Legacy names are adapters; explicit product roles take precedence. */
body .btn {
  --twoip-button-accent: var(--twoip-primary);
  --twoip-button-container: var(--twoip-primary-container);
  --twoip-button-on-accent: var(--twoip-button-on-primary);
  --twoip-button-on-container: var(--twoip-on-primary-container);
  --twoip-button-fill: transparent;
  --twoip-button-ink: var(--twoip-button-accent);
  --twoip-button-border: var(--twoip-button-accent);
  --twoip-button-focus: var(--twoip-button-accent);
  --twoip-control-focus: var(--twoip-button-accent);
}
body .btn.btn:not(.control-el):not(.input-password-toggle):not(.twoip-icon-action):where(:not(.dropdown-toggle,.twoip-button--icon)) {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--twoip-button-border);
  border-radius: var(--twoip-radius-medium);
  outline-offset: 3px;
  background: var(--twoip-button-fill);
  color: var(--twoip-button-ink);
  box-shadow: none;
  text-transform: none;
  font-family: "2ip";
  font-size: 15px;
  font-weight: normal;
  line-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--twoip-button-gap, 6px);
  white-space: var(--twoip-button-white-space, normal);
  word-break: normal;
  overflow-wrap: normal;
  text-decoration: none;
  transition: background-color .15s ease, box-shadow .15s ease;
}
body .btn.btn:is(.btn-success,.twoip-button--save,[data-twoip-button-role="save"]) {
  --twoip-button-gap: var(--twoip-service-option-row-gap, 8px);
  --twoip-button-accent: var(--twoip-success);
  --twoip-button-container: var(--twoip-success-container);
  --twoip-button-on-accent: var(--twoip-on-success);
  --twoip-button-on-container: var(--twoip-success);
}
body .btn.btn:is(.btn-danger,.btn-delete,.twoip-button--destructive-outlined,[data-twoip-button-role="delete"]) {
  --twoip-button-accent: var(--twoip-error);
  --twoip-button-container: var(--twoip-error-container);
  --twoip-button-on-accent: var(--twoip-on-error);
  --twoip-button-on-container: var(--twoip-error);
}
body .btn.btn:is(.btn-warning,.twoip-button--warning,[data-twoip-button-role="warning"]) {
  --twoip-button-accent: var(--twoip-warning);
  --twoip-button-container: var(--twoip-warning-container);
  --twoip-button-on-accent: var(--twoip-on-warning);
  --twoip-button-on-container: var(--twoip-warning);
}
/* Explicit ordinary intent overrides legacy color classes (including logout). */
body .btn.btn[data-twoip-button-role="action"] {
  --twoip-button-accent: var(--twoip-primary);
  --twoip-button-container: var(--twoip-primary-container);
  --twoip-button-on-accent: var(--twoip-button-on-primary);
  --twoip-button-on-container: var(--twoip-on-primary-container);
}
body .btn.btn:not(.control-el):not(.input-password-toggle):not(.twoip-icon-action):where(:not(.dropdown-toggle,.twoip-button--icon)):not(:disabled):not(.disabled):is(:hover,:focus-visible) {
  --twoip-button-fill: var(--twoip-button-container);
  --twoip-button-ink: var(--twoip-button-on-container);
  background: var(--twoip-button-fill);
  color: var(--twoip-button-ink);
  border-color: var(--twoip-button-border);
  box-shadow: var(--twoip-elevation-1);
}
body .btn.btn:not(.control-el):not(.input-password-toggle):not(.twoip-icon-action):where(:not(.dropdown-toggle,.twoip-button--icon)):not(:disabled):not(.disabled):active {
  --twoip-button-fill: var(--twoip-button-accent);
  --twoip-button-ink: var(--twoip-button-on-accent);
  background: var(--twoip-button-fill);
  color: var(--twoip-button-ink);
  border-color: var(--twoip-button-border);
  box-shadow: inset 0 0 0 1px var(--twoip-button-border);
}
body .btn.btn:not(.control-el):not(.input-password-toggle):not(.twoip-icon-action):where(:not(.dropdown-toggle,.twoip-button--icon)):focus-visible {
  outline: 2px solid var(--twoip-button-focus);
  outline-offset: 3px;
}
body .btn.btn:is(:disabled,.disabled),
body fieldset:disabled .btn.btn {
  opacity: .5;
  box-shadow: none;
  cursor: default;
}
body .btn.btn .twoip-icon {
  width: 18px;
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
  position: static;
  margin-inline-end: 0;
  vertical-align: middle;
  color: inherit;
}
body .btn.btn.twoip-button--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--twoip-radius-full);
}
/* Stored CMS label markup must not restore link decoration inside controls. */
body .btn.btn :is(span,a,i,.twoip-inline-label) {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}
body .btn.btn.twoip-inline-link {
  border-bottom: 1px solid var(--twoip-button-border);
  color: var(--twoip-button-ink) !important;
}

/* Standalone delete actions and outlined buttons share the same error roles. */
.twoip-destructive-control {
  --twoip-control-ink: var(--twoip-error); --twoip-control-focus: var(--twoip-error); --twoip-destructive-fill: transparent;
  color: var(--twoip-error); border-color: var(--twoip-error); background-color: var(--twoip-destructive-fill);
  text-decoration: none; transition: background-color .15s ease, box-shadow .15s ease;
}
.twoip-destructive-control .twoip-icon { color: currentColor; }
.twoip-destructive-control:is(a,button,[role="button"],.twoip-icon):not(:disabled):not(.disabled):is(:hover,:focus-visible,:active) { --twoip-destructive-fill: var(--twoip-error-container); }
.twoip-destructive-control:focus-visible { outline: 2px solid var(--twoip-error); outline-offset: 3px; }
.twoip-destructive-control:not(.btn):not(.twoip-destructive-control--icon):active { box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--twoip-scrim) 12%, transparent); }
/* Icon actions keep their existing box; only the state surface is visible. */
.twoip-destructive-control--icon { border-color: transparent; border-radius: var(--twoip-radius-full); }
body .btn.btn.twoip-destructive-control--icon { --twoip-button-fill: transparent; --twoip-button-border: transparent; }
body .btn.btn.twoip-destructive-control--icon:not(:disabled):not(.disabled):is(:hover,:focus-visible,:active) { --twoip-button-fill: var(--twoip-error-container); box-shadow: none; }
.twoip-destructive-control--icon:active { box-shadow: none; }

/* Form selectors reuse the header menu family around an outlined native-value proxy. */
body .twoip-form-selector { min-width: 0; width: 100%; }
body .input-group > .twoip-form-selector { flex: 1 1 0; width: auto; }
body .twoip-form-group > .input-group:has(> .twoip-form-selector),
body .twoip-form-group > .input-group:has(> .input-group-text):not(:has(input[type="file"])) {
  display: flex;
  flex-wrap: nowrap;
}
/* Prefix slot shares the control metric; table-cell alignment is not a flex contract. */
body .twoip-form-group > .input-group:not(:has(input[type="file"])) > .input-group-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: var(--twoip-control-height);
  padding-block: 0;
}
body .twoip-form-select-trigger {
  display: flex;
  width: 100%;
  justify-content: space-between;
  text-align: start;
  cursor: pointer;
}
body .twoip-form-select-trigger .twoip-icon {
  color: currentColor;
  margin: 0;
  position: static;
}

body .twoip-form-selector .twoip-selector-list { min-width: 0; }
body .twoip-form-selector .twoip-selector-list .twoip-selector-name { overflow-wrap: anywhere; }
body .twoip-form-selector .twoip-selector-toggle:disabled { cursor: not-allowed; }

body .twoip-form-group .twoip-radio label,
body .twoip-form-group .twoip-checkbox label { white-space: normal; color: var(--twoip-on-surface); }
body .twoip-checkbox input[type=checkbox] {
  appearance: auto; opacity: 1; position: static; width: 18px; height: 18px;
  margin: 0 6px 0 0; z-index: auto; overflow: visible; pointer-events: auto; vertical-align: middle;
  accent-color: var(--twoip-primary); cursor: pointer;
}
body .twoip-checkbox .checkbox-material,
body .twoip-radio label :is(.circle,.check) { display: none; }

body .twoip-radio.radio-denied input[type=radio] { accent-color: var(--twoip-error); }
body .twoip-checkbox input:disabled, body .twoip-radio input:disabled { cursor: not-allowed; }
body .twoip-checkbox label:has(input:disabled), body .twoip-radio label:has(input:disabled) { color: var(--twoip-on-surface-variant); }
@media (pointer: coarse) {
  body :is(.t3-off-canvas .sidebar-nav > li > a,.ipblock .showip_mod .cli button,.ipblock .showip_mod .iphistory button) { min-width: 44px; min-height: 44px; }
  body .twoip-checkbox label { min-height: 40px; display: inline-flex; align-items: center; }
}


/* Shared grouping and dense data presentation. */
body :is(.twoip-panel:not(.twoip-accordion-item),.card) {
  background: var(--twoip-surface);
  color: var(--twoip-on-surface);
  border: 0;
  border-radius: var(--twoip-radius-medium);
  box-shadow: none;
}
body :is(.twoip-panel:not(.twoip-accordion-item),.card) :is(.twoip-panel:not(.twoip-accordion-item),.card) {
  background: var(--twoip-surface-container);
}
/* Native Bootstrap lists are component owners too: their first paint must not
   depend on the framework adding twoip-tabs/nav-item/twoip-tab classes.
   Category, route and pane tabs share the existing surface/geometry contract. */
body :is(.twoip-tabs,.nav-tabs,.nav-pills,.t3-isotope-menu .module-ct > .row) { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(var(--twoip-tab-min-inline-size),100%),1fr)); grid-auto-rows: 1fr; gap: var(--twoip-tab-group-gap); border: 0; padding: 0; list-style: none; }
/* Tabs never add a second bottom margin to the canonical content gap. */
body :is(.twoip-tabs,.nav-tabs,.nav-pills) {
  margin-block-end: 0;
}
/* Following content remains in normal flow with one shared section gap. */
:root {
  --twoip-tabs-content-gap: 16px;
  --twoip-tab-min-inline-size: 140px;
  --twoip-tab-group-gap: 10px;
  --twoip-tab-icon-gap: var(--twoip-space-3, 12px);
}
/* Wide groups distribute equally; narrow groups wrap complete buttons. */
@media (min-width: 992px) {
  body :is(.twoip-tabs,.nav-tabs,.nav-pills,.t3-isotope-menu .module-ct > .row) {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  }
}
body :is(.twoip-tabs,.nav-tabs,.nav-pills) + :is(.table-responsive,.twoip-service-table-scroll,.tab-content,table,.twoip-statistics-chart,.twoip-data-panel) {
  margin-block-start: var(--twoip-tabs-content-gap);
}
/* Native server sorting and DataTables share header control/indicator geometry. */
body .twoip-sort-control,
body .dt-bootstrap5 table.dataTable thead th .dt-column-header {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  max-width: 100%;
}
body .twoip-sort-control > .twoip-icon,
body .dt-bootstrap5 table.dataTable thead th .dt-column-order,
body .dt-bootstrap5 table.dataTable thead th:is(.dt-orderable-asc,.dt-orderable-desc,.dt-ordering-asc,.dt-ordering-desc) .dt-column-order {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  color: var(--twoip-primary);
  opacity: .55;
  font-size: 16px;
  line-height: 1;
}
body .twoip-sort-control > .twoip-icon.active,
body .dt-bootstrap5 table.dataTable thead th:is(.dt-ordering-asc,.dt-ordering-desc) .dt-column-order {
  opacity: 1;
}
body .twoip-data-panel[aria-busy="true"] .table-responsive {
  opacity: .6;
}
body .twoip-sort-control > .twoip-inline-label { min-width: 0; }
/* Standard tabular captions are atomic; the existing table scroll owner handles
   insufficient space. Property labels, WHOIS prose and layout tables retain
   their separate wrapping contracts. */
body :is(table.twoip-data-table,table.twoip-table-comparison,table.dataTable) > thead > tr > th {
  white-space: nowrap;
}
body .twoip-sort-control > .twoip-inline-label,
body .dt-bootstrap5 table.dataTable thead th .dt-column-title {
  flex: 0 0 auto;
  white-space: nowrap;
}
body table.twoip-table-comparison > thead > tr > th {
  width: auto;
}
body table.twoip-table-comparison > tbody > tr > td:first-child {
  white-space: nowrap;
}
/* Radio choices share the tab surface without claiming tab/panel semantics. */
body .twoip-tabs--choice {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  margin-block-start: var(--twoip-tabs-content-gap);
}
body .twoip-help-block--info,
body .twoip-form-group .twoip-help-block.twoip-help-block--info {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
body .twoip-help-block--info > .twoip-icon { position: static; margin: 0; font-size: 20px; color: var(--twoip-primary); }
body .twoip-help-content { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
body :is(.twoip-tabs,.nav-tabs,.nav-pills,.t3-isotope-menu .module-ct > .row) > button { border-radius: var(--twoip-radius-category); }
body :is(.twoip-tabs,.nav-tabs,.nav-pills,.t3-isotope-menu .module-ct > .row) > :is(.nav-item,li) { width: auto; min-width: 0; margin: 0; padding: 0; }
body :is(.twoip-tabs,.nav-tabs,.nav-pills,.t3-isotope-menu .module-ct > .row) :is(.twoip-tab,.nav-tabs > li > a,.nav-pills > li > a,.t3-isotope-menu button > span) {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--twoip-tab-icon-gap);
  width: 100%;
  height: 100%;
  min-height: var(--twoip-tab-min-height, 52px);
  padding: var(--twoip-tab-padding-block, 10px) var(--twoip-space-2, 8px);
  margin: 0;
  border: 0;
  border-radius: var(--twoip-radius-category);
  font-family: "2ip";
  font-size: var(--twoip-tab-font-size, var(--twoip-type-body));
  line-height: 1.3;
  font-weight: 400;
  color: var(--twoip-on-surface-variant);
  background: var(--twoip-surface-container-high);
  background-image: none;
  box-shadow: none;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background-color .15s ease;
}
body :is(.twoip-tabs,.nav-tabs,.nav-pills,.t3-isotope-menu .module-ct > .row) :is(.twoip-tab,.nav-tabs > li > a,.nav-pills > li > a,.t3-isotope-menu button > span):is(.active,[aria-selected="true"]),
body :is(.twoip-tabs,.nav-tabs,.nav-pills,.t3-isotope-menu .module-ct > .row) > li.active > :is(.twoip-tab,.nav-tabs > li > a,.nav-pills > li > a,.t3-isotope-menu button > span),
body .t3-isotope-menu .module-ct > .row:not(:has(.is-checked)) button:has(> input:checked) > span,
body :is(.twoip-tabs,.nav-tabs,.nav-pills,.t3-isotope-menu .module-ct > .row) .is-checked > :is(.twoip-tab,.nav-tabs > li > a,.nav-pills > li > a,.t3-isotope-menu button > span) { color: var(--twoip-on-primary-container); background: var(--twoip-primary-container); font-weight: 600; }
body :is(.twoip-tabs,.nav-tabs,.nav-pills,.t3-isotope-menu .module-ct > .row) :is(.twoip-tab,.nav-tabs > li > a,.nav-pills > li > a,.t3-isotope-menu button > span):hover { background: var(--twoip-primary-container); }
body :is(.twoip-tabs,.nav-tabs,.nav-pills,.t3-isotope-menu .module-ct > .row) :is(.twoip-tab,.nav-tabs > li > a,.nav-pills > li > a,.t3-isotope-menu button > span):active { background: var(--twoip-primary-container); }
body :is(.twoip-tabs,.nav-tabs,.nav-pills,.t3-isotope-menu .module-ct > .row) :is(.twoip-tab,.nav-tabs > li > a,.nav-pills > li > a,.t3-isotope-menu button > span):focus-visible { outline: 2px solid var(--twoip-primary); outline-offset: 3px; }
body :is(.twoip-tabs,.nav-tabs,.nav-pills,.t3-isotope-menu .module-ct > .row) :is(.twoip-tab,.nav-tabs > li > a,.nav-pills > li > a,.t3-isotope-menu button > span) .twoip-icon {
  color: currentColor;
  position: static;
  margin: 0;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
body :is(.twoip-tabs,.nav-tabs,.nav-pills,.t3-isotope-menu .module-ct > .row) :is(.twoip-tab,.nav-tabs > li > a,.nav-pills > li > a,.t3-isotope-menu button > span):is(.disabled,[aria-disabled="true"]), body :is(.twoip-tabs,.nav-tabs,.nav-pills,.t3-isotope-menu .module-ct > .row) .disabled > :is(.twoip-tab,.nav-tabs > li > a,.nav-pills > li > a,.t3-isotope-menu button > span) { opacity: .5; pointer-events: none; }

body .twoip-tabs.twoip-tabs--choice input[type="radio"]:checked + .twoip-tab {
  color: var(--twoip-primary);
  background: var(--twoip-primary-container);
  font-weight: 600;
}
body .twoip-tabs--choice input:disabled + .twoip-tab {
  opacity: .5;
  cursor: default;
}
body .twoip-tabs--choice input:focus-visible + .twoip-tab {
  outline: 2px solid var(--twoip-primary);
  outline-offset: 3px;
}
body .twoip-tabs--choice .twoip-tab {
  cursor: pointer;
}

body .tagspopular ul > li > a, body .twoip-label { border-radius: var(--twoip-radius-small); }
body .t3-mainbody .t3-content table.table,
body .modal table.table {
  --bs-table-color: var(--twoip-on-surface); --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--twoip-surface-container-high); --bs-table-hover-bg: var(--twoip-surface-container-high);
  --bs-table-striped-color: var(--twoip-on-surface); --bs-table-hover-color: var(--twoip-on-surface);
  --bs-table-active-bg: var(--twoip-primary-container); --bs-table-active-color: var(--twoip-on-primary-container);
  --bs-table-border-color: var(--twoip-outline-variant);
  font-size: 15px;
}
/* Native table-cell height is a minimum; multiline/expanded content can grow.
   Presentation/layout and permission matrices retain their existing metrics. */
body .t3-mainbody .t3-content table.table:not([role="presentation"]):not(.twoip-table-permission-matrix) > :is(thead,tbody,tfoot) > tr > :is(th,td),
body .modal table.table:not([role="presentation"]):not(.twoip-table-permission-matrix) > :is(thead,tbody,tfoot) > tr > :is(th,td) {
  box-sizing: border-box; height: var(--twoip-table-row-height);
  padding: var(--twoip-table-cell-padding-block) var(--twoip-table-cell-padding-inline);
  line-height: var(--twoip-table-line-height);
  border-color: var(--twoip-outline-variant); vertical-align: middle;
}
body :is(.t3-content,.modal) table.table:is([role="presentation"],.twoip-table-permission-matrix) :is(th,td) {
  padding: 8px 10px; border-color: var(--twoip-outline-variant); vertical-align: middle;
}
/* First-party data cells share one left axis, including vendor numeric and
   Bootstrap alignment utilities (!important). Layout/permission matrices opt out. */
body :is(.t3-content,.modal) table:not([role="presentation"]):not(.twoip-table-permission-matrix) :is(th,td) {
  text-align: left !important;
  padding-inline: 10px;
}
/* Ordinary words wrap at natural boundaries; responsive strategy owns fit. */
body :is(.t3-content,.modal) table.table :is(th,td) {
  word-break: normal;
  overflow-wrap: normal;
}
body .dt-bootstrap5 table.dataTable {
  table-layout: auto;
}
body .dt-bootstrap5 table.dataTable .dt-column-title {
  min-width: 0;
  word-break: normal;
  overflow-wrap: normal;
}
/* A primary entity column retains enough space for ordinary names. */
body .dt-bootstrap5 table.dataTable .twoip-table-entity {
  min-width: 10rem;
}
body .twoip-table-comparison .twoip-table-number,
body .dt-bootstrap5 table.dataTable td.dt-type-numeric {
  white-space: nowrap;
}
/* Keep the available table width stable when responsive rows change height. */
body .modal-body:has(.dt-container) {
  scrollbar-gutter: stable;
}
/* Utilities reflow by their container, including narrow desktop modals. */
body .dt-bootstrap5 > .dt-layout-row:not(.dt-layout-table) {
  gap: 8px 0;
}
body .dt-bootstrap5 > .dt-layout-row:not(.dt-layout-table) > .dt-layout-cell {
  flex: 1 1 auto;
  min-width: min(100%, 18rem);
  max-width: 100%;
}
body .dt-bootstrap5 .dt-length {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
body .dt-bootstrap5 .dt-length label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body .dt-bootstrap5 .dt-search {
  min-width: 0;
}
body .dt-bootstrap5 .dt-search input {
  max-width: 100%;
}
body .t3-mainbody .t3-content table.table > thead > tr > th,
body .modal table.table > thead > tr > th {
  color: var(--twoip-on-surface-variant); background: var(--twoip-surface-container);
  border-bottom: 1px solid var(--twoip-outline-variant); font-size: 15px; font-family: '2ip-bold'; font-weight: normal;
}
body :is(.t3-content,.modal) table.table > tbody > tr:hover > * { --bs-table-bg-state: var(--twoip-surface-container-high); }
body :is(.t3-content,.modal) table.table > tbody > tr:is(.selected,.table-active) > * { --bs-table-bg-state: var(--twoip-primary-container); background: var(--twoip-primary-container); color: var(--twoip-on-primary-container); }
body :is(.t3-content,.modal) :is(.dt-info,.twoip-table-info) { color: var(--twoip-on-surface-variant); font-size: 14px; }
/* Joomla, custom/AJAX and DataTables pagers share one control family. */
body :is(.t3-mainbody .t3-content,.modal) .pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: var(--twoip-pagination-gap); float: none; margin: 0; padding: 0; list-style: none;
}
body :is(.t3-mainbody .t3-content,.modal) .pagination::before,
body :is(.t3-mainbody .t3-content,.modal) .pagination::after { display: none; }
body :is(.t3-mainbody .t3-content,.modal) .pagination > li { flex: 0 0 auto; display: block; }
body :is(.t3-mainbody .t3-content,.modal) .pagination > li > :is(a,span,button,.page-link) {
  display: flex; align-items: center; justify-content: center; float: none;
  width: var(--twoip-pagination-size); min-width: var(--twoip-pagination-size);
  height: var(--twoip-pagination-size); min-height: var(--twoip-pagination-size);
  padding: 0; margin: 0; top: 0; border: 0; border-radius: var(--twoip-pagination-radius);
  line-height: 1; font-size: 15px; color: var(--twoip-pagination-foreground);
  background: transparent; box-shadow: none; text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
/* Center the shared icon slot, independent of glyph width or account typography. */
body :is(.t3-mainbody .t3-content,.modal) .pagination .twoip-icon {
  display: flex; align-items: center; justify-content: center;
  width: 1em; height: 1em; flex: 0 0 auto;
  padding: 0; margin: 0; position: static; line-height: 1;
}
body :is(.t3-mainbody .t3-content,.modal) .pagination > li.active > :is(a,span,button,.page-link),
body :is(.t3-mainbody .t3-content,.modal) .pagination [aria-current="page"] {
  color: var(--twoip-pagination-active-foreground); background: var(--twoip-pagination-active);
}
body :is(.t3-mainbody .t3-content,.modal) .pagination > li:not(.disabled) > :is(a,button,.page-link):hover { background: var(--twoip-pagination-hover); color: var(--twoip-pagination-active-foreground); }
body :is(.t3-mainbody .t3-content,.modal) .pagination > li:not(.disabled) > :is(a,button,.page-link):active { background: var(--twoip-pagination-active); }
body :is(.t3-mainbody .t3-content,.modal) .pagination > li.disabled > :is(a,span,button,.page-link) { color: var(--twoip-pagination-disabled); opacity: .5; pointer-events: none; background: transparent; }
body .t3-content .twoip-table-footer { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
body .t3-content .twoip-table-footer > :first-child { flex: 1 1 auto; width: auto; }
body .t3-content .twoip-table-footer > :last-child { flex: 0 0 auto; width: auto; max-width: 100%; }
body .t3-content .twoip-table-footer.row { margin-inline: 0; }
body .t3-content .twoip-table-footer.row > * { padding-inline: 0; }
body .t3-content .twoip-table-paging { float: none !important; margin-inline-start: auto; }
@media (max-width: 767px) {
  body .t3-content .twoip-table-footer > :last-child { flex: 1 1 100%; }
  body :is(.t3-mainbody .t3-content,.modal) .pagination:not(.dt-paging .pagination) > li:not(.active):not(:nth-child(-n+2)):not(:nth-last-child(-n+2)) { display: none; }
}
body .dt-container :is(.dt-info,.dt-length,.dt-search) { color: var(--twoip-on-surface-variant); font-size: 14px; }
body .t3-sl-helper .t3-sl-helper-wrap { border-radius: var(--twoip-radius-medium); box-shadow: none; }
body .t3-mainbody .t3-content .nav:not(.twoip-tabs):not(.nav-tabs):not(.nav-pills) .twoip-icon { color: var(--twoip-primary); }

/* Dialogs and feedback share surfaces, states and color roles. */
body .modal .modal-content {
  color: var(--twoip-on-surface); background: var(--twoip-surface);
  border: 0; border-radius: var(--twoip-radius-large); box-shadow: var(--twoip-elevation-2);
}
body .modal .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--twoip-outline-variant); }
body .modal .modal-title { font-size: 22px; line-height: 1.3; }
body .modal .modal-body { padding: 16px 20px; }
body .modal .modal-footer { display: flex; align-items: center; padding: 12px 20px 16px; border-color: var(--twoip-outline-variant); gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
body .modal .modal-footer form { margin: 0; }
body .modal .modal-footer .btn { margin: 0; }
body :is(.tooltip-inner,.popover) { border-radius: var(--twoip-radius-small); font-size: 14px; }
body .tooltip-inner { background: var(--twoip-on-surface); color: var(--twoip-surface); padding: 6px 10px; }
body .popover { background: var(--twoip-surface); border-color: var(--twoip-outline-variant); box-shadow: var(--twoip-elevation-2); }
body .popover-header { background: var(--twoip-surface-container); }
body .alert {
  --twoip-status-ink: var(--twoip-on-primary-container); --twoip-status-fill: var(--twoip-primary-container);
  color: var(--twoip-status-ink); background: var(--twoip-status-fill); border: 1px solid var(--twoip-outline-variant);
  border-radius: var(--twoip-radius-medium); box-shadow: none;
}
body .alert.alert-success { --twoip-status-ink: var(--twoip-success); --twoip-status-fill: var(--twoip-success-container); }
body .alert.alert-warning { --twoip-status-ink: var(--twoip-warning); --twoip-status-fill: var(--twoip-warning-container); }
body .alert.alert-danger { --twoip-status-ink: var(--twoip-error); --twoip-status-fill: var(--twoip-error-container); }
body .alert .twoip-icon { color: inherit; }
body .alert .twoip-inline-link { --twoip-link-text: var(--twoip-status-ink); --twoip-link-border: var(--twoip-status-ink); }
body .alert :is(a:not(.twoip-inline-link),.alert-link:not(.twoip-inline-link),.copy-clipboard-alert:not(.twoip-icon-action) .twoip-icon) { color: inherit; }
body #system-message-container joomla-alert {
  --jui-alert-border-radius: 12px; --jui-alert-button-color-dark: var(--twoip-on-surface-variant);
  color: var(--twoip-on-primary-container); background: var(--twoip-primary-container);
  border-color: var(--twoip-outline-variant); border-left-color: var(--twoip-primary); box-shadow: none;
  font-family: "2ip";
}
body #system-message-container joomla-alert[type=success] { color: var(--twoip-success); background: var(--twoip-success-container); border-left-color: var(--twoip-success); }
body #system-message-container joomla-alert[type=warning] { color: var(--twoip-warning); background: var(--twoip-warning-container); border-left-color: var(--twoip-warning); }
body #system-message-container joomla-alert[type=danger] { color: var(--twoip-error); background: var(--twoip-error-container); border-left-color: var(--twoip-error); }
body #system-message-container joomla-alert .alert-heading { color: inherit; }
body #system-message-container joomla-alert .joomla-alert--close { border-radius: var(--twoip-radius-full); color: inherit; }
body .progress { border-radius: var(--twoip-radius-full); background: var(--twoip-surface-container-high); box-shadow: none; }
body .progress-bar { background-color: var(--twoip-primary); box-shadow: none; }
body .progress-bar-success { background-color: var(--twoip-success); }
body .progress-bar-danger { background-color: var(--twoip-error); }
body a.totop > .twoip-icon { display: flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: inherit; line-height: 1; margin: 0; color: currentColor; }
body a.totop { width: 55px; height: 55px; border: 1px solid var(--twoip-outline-variant); border-radius: var(--twoip-radius-medium); background: var(--twoip-surface); color: var(--twoip-primary); box-shadow: var(--twoip-elevation-1); transition: background-color .15s ease, box-shadow .15s ease; }
@media (max-width: 480px) {
  body .modal .modal-body, body .modal .modal-header { padding: 14px 16px; }
  body .modal .modal-footer { padding: 10px 16px 14px; }
}

/* Gauge typography remains owned by the shared speedometer component. */
body #t3-mainnav .sidebar-nav .hang::before { color: var(--twoip-on-surface-variant); }
body #t3-mainnav .sidebar-nav > li:is(.active,.open) > a .hang::before { color: inherit; }
/* Dark shared consumers stay readable without altering specialized workflows. */
:root[data-theme="dark"] body :is(.t3-off-canvas-body,.modal-content,.dropdown-menu,.twoip-panel:not(.twoip-accordion-item),.twoip-well,.input-group > .input-group-text) {
  background-color: var(--twoip-surface);
  color: var(--twoip-on-surface);
  border-color: var(--twoip-outline-variant);
}
:root[data-theme="dark"] body :is(.table,.table-responsive,.twoip-panel-heading:not(.twoip-inline-link):not(.twoip-accordion-trigger),.twoip-panel-footer,.modal-header,.modal-footer) {
  color: var(--twoip-on-surface);
  border-color: var(--twoip-outline-variant);
}
:root[data-theme="dark"] body .table { --bs-table-color: var(--twoip-on-surface); --bs-table-bg: var(--twoip-surface); --bs-table-striped-bg: var(--twoip-surface-container-high); --bs-table-striped-color: var(--twoip-on-surface); --bs-table-hover-color: var(--twoip-on-surface); --bs-table-hover-bg: var(--twoip-surface-container-high); }
body .modal[data-twoip-confirmation-managed] > .modal-dialog > .modal-content { border: 1px solid var(--twoip-outline); }


/* Integrated groups; desktop service lists use a separate, readable flyout. */
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav .twoip-submenu li { min-width: 0; background: transparent; }
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav .twoip-submenu li > a { padding: 6px; background: transparent; color: var(--twoip-on-surface); }
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav .twoip-submenu li > a:is(:hover,:focus-visible),
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav .twoip-submenu li:is(.open,.active) > a { background: var(--twoip-primary-container); color: var(--twoip-on-primary-container); }
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav .twoip-submenu { list-style: none; display: none; }
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav .open > .twoip-submenu { display: block; }
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav > li > .twoip-submenu > li > a { min-height: var(--twoip-navigation-group-height); padding: 6px; line-height: 19px; font-size: 14px; gap: 6px; border-radius: var(--twoip-radius-small); align-items: center; }
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav [hidden] { display: none !important; }
/* A drawer avoids compressing technical navigation into the narrow desktop column. */
@media (min-width: 992px) and (max-width: 1099px) {
  body #t3-mainnav { display: none; }
  body .t3-header .mobile-top-menu { display: block !important; }
  body .t3-header .account-lg { display: none !important; }
  body .t3-header .account-mob { display: block !important; }
  body .twoip-content-column { margin-left: 0; width: 100%; }
}

@media (min-width: 1100px) {
  body #t3-mainnav .twoip-sidebar-column { width: var(--twoip-sidebar-width); }
  body #t3-mainnav .t3-navbar { width: var(--twoip-sidebar-width); right: auto; }
  body .twoip-content-column { margin-left: calc(var(--twoip-sidebar-width) + var(--twoip-shell-gap)); width: calc(100% - var(--twoip-sidebar-width) - var(--twoip-shell-gap)); }
  body #t3-mainnav .sidebar-nav > li > .twoip-submenu { position: relative; }
  body #t3-mainnav .sidebar-nav > li.open > .twoip-submenu { display: grid; grid-auto-rows: 1fr; }
  body #t3-mainnav .sidebar-nav > li > .twoip-submenu > li > a { height: 100%; }
  body #t3-mainnav .sidebar-nav > li > .twoip-submenu > li > a > .hang::before { content: "\f054"; font-size: 12px; color: var(--twoip-on-surface-variant); }
  body #t3-mainnav .sidebar-nav > li > .twoip-submenu > li > a:is(:hover,:focus-visible,[aria-expanded="true"]) > .hang::before { color: inherit; }
  body #t3-mainnav .sidebar-nav > li > .twoip-submenu > li > .twoip-submenu {
    position: absolute; inset-inline-start: calc(100% + 12px); top: var(--twoip-flyout-offset, 0px);
    width: var(--twoip-sidebar-width);
    height: auto; max-height: var(--twoip-flyout-max-height, none); overflow-y: var(--twoip-flyout-overflow, visible); margin: 0; padding: 8px;
    background: var(--twoip-surface-container-low); border: 1px solid var(--twoip-outline-variant);
    border-radius: var(--twoip-radius-medium); box-shadow: var(--twoip-elevation-2); z-index: 1050;
  }
  body #t3-mainnav .sidebar-nav > li > .twoip-submenu > li > .twoip-submenu a {
    min-height: 44px; padding: 8px 6px;
  }
}
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav > li { margin-bottom: 2px; }
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav .twoip-menu-label { hyphens: none; text-wrap: balance; }
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav .twoip-submenu { border-left-color: color-mix(in srgb, var(--twoip-outline-variant) 65%, transparent); }

body .ipblock .showip_mod .s-ipblockgrid > .twoip-hidden-xs { display: grid !important; }


body a.totop:is(:hover,:focus-visible) { background: var(--twoip-primary-container); color: var(--twoip-primary); border-color: var(--twoip-primary); box-shadow: var(--twoip-elevation-1); }
body a.totop:active { background: color-mix(in srgb, var(--twoip-primary-container) 75%, var(--twoip-primary)); color: var(--twoip-primary); box-shadow: var(--twoip-elevation-1); }

/* Export and destructive history actions share the existing button geometry. */
body .item-page_cabinet .row:has(> .export):has(> .history) { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-inline: 0; }
body .item-page_cabinet .row:has(> .export):has(> .history) > :is(.export,.history) { width: auto; padding: 0; display: flex; align-items: center; }
@media (max-width: 767px) { body .item-page_cabinet .row:has(> .export):has(> .history) > :is(.export,.history) { flex: 1 1 100%; } body .item-page_cabinet :is(.export,.history) .btn { width: 100%; } }

body :is(.t3-mainbody .t3-content,.modal) .dt-container .dt-layout-row:has(.dt-paging) { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-inline: 0; }
body :is(.t3-mainbody .t3-content,.modal) .dt-container .dt-layout-row:has(.dt-paging) > .dt-layout-cell { padding-inline: 0; }
body :is(.t3-mainbody .t3-content,.modal) .dt-container .dt-layout-row:has(.dt-paging) > .dt-layout-start { width: auto; flex: 1 1 auto; }
body :is(.t3-mainbody .t3-content,.modal) .dt-container .dt-layout-row:has(.dt-paging) > .dt-layout-end { width: auto; flex: 0 0 auto; max-width: 100%; }
@media (max-width: 767px) {
  body :is(.t3-mainbody .t3-content,.modal) .dt-container .dt-layout-row:has(.dt-paging) { margin-inline: 0; }
  body :is(.t3-mainbody .t3-content,.modal) .dt-container .dt-layout-row:has(.dt-paging) > :is(.dt-layout-start,.dt-layout-end) { flex: 1 1 100%; width: 100%; padding-inline: 0; }
  body :is(.t3-mainbody .t3-content,.modal) .dt-paging { width: 100%; }
}

/* All material bodies fill their allocated content column; component internals keep their own scale. */
body .t3-content :is(.article-content,.article-intro,.category-desc) {
  inline-size: 100%; max-inline-size: none; min-inline-size: 0; margin-inline: 0;
}
/* Article media stays responsive; technical overflow stays local. */
body .item-page_blog .article-content :is(img,video,iframe,svg) { max-width: 100%; }
body .item-page_blog .article-content pre { max-width: 100%; overflow-x: auto; white-space: pre; }
body .item-page_blog .article-content :is(p,li,td,a) { overflow-wrap: break-word; }
body .item-page_blog .article-content table { max-width: 100%; }

/* Keep scrolling inside dialog content; avoid a second shell scrollbar. */
body .modal:has(> .modal-dialog-centered.modal-dialog-scrollable) { overflow-y: hidden; }
/* Ordinary Bootstrap dialogs use viewport centering and bounded body scrolling. */
body .modal-dialog-centered.modal-dialog-scrollable {
  min-height: calc(100% - var(--bs-modal-margin) * 2);
  height: calc(100% - var(--bs-modal-margin) * 2);
  margin-inline: auto;
}
body .modal-dialog-centered.modal-dialog-scrollable .modal-content { width: 100%; height: auto; max-height: 100%; }
body .modal-dialog-centered.modal-dialog-scrollable .modal-body { overflow-y: auto; }
@media (max-width: 575px) {
  body .modal-dialog-centered.modal-dialog-scrollable { width: calc(100% - var(--bs-modal-margin) * 2); }
}

/* Existing Raty owner: one geometry for SSR, AJAX and radio-derived summaries. */
body .rating { display: inline-flex; align-items: center; vertical-align: middle; flex-wrap: nowrap; flex-shrink: 0; gap: var(--twoip-rating-star-gap); font-size: var(--twoip-rating-star-size); line-height: 1; white-space: nowrap; }
/* Reserve the existing five-star footprint before Raty mounts. */
body .provider-criterion-row > .rating { min-inline-size: calc(5 * var(--twoip-rating-star-size) + 4 * var(--twoip-rating-star-gap)); min-block-size: var(--twoip-rating-star-size); }
body .rating > .twoip-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--twoip-rating-star-size); width: var(--twoip-rating-star-size); height: var(--twoip-rating-star-size); font-size: var(--twoip-rating-star-size); line-height: 1; margin: 0; padding: 0; position: static; transform: none; box-sizing: border-box; }
/* Explicit provider summary exception: retain pre-standardization 160%/130% geometry. */
body .twoip-rating--summary { font-size: var(--twoip-rating-summary-font-size); line-height: 1.6; }
body .twoip-rating--summary > .rating { font-size: inherit; line-height: inherit; align-items: normal; vertical-align: baseline; gap: 0; }
body .twoip-rating--summary > .rating > .twoip-icon { display: inline-block; flex: 0 0 auto; width: var(--fa-width, 1em); height: auto; font-size: var(--twoip-rating-summary-star-size); line-height: 1; margin-right: var(--twoip-rating-summary-star-spacing); }
/* Filled/half and empty keep their existing semantic gold tokens. */
.rating :is(.star-on,.star-half), .rating :is(.star-on,.star-half)::before { color: var(--twoip-rating-filled); }
.rating :is(.star,.star-off), .rating :is(.star,.star-off)::before { color: var(--twoip-rating-outline); }
.rating :focus-visible { outline-color: var(--twoip-warning); }

/* Compact labelled filters reuse selector geometry without becoming action buttons. */
body .twoip-select-control {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 9px;
  padding-inline-start: var(--twoip-control-padding-inline);
  padding-inline-end: var(--twoip-select-trailing-inset);
  gap: var(--twoip-select-icon-gap);
  font-size: var(--twoip-type-body);
  color: var(--twoip-on-surface);
  background: var(--twoip-surface);
  border: 1px solid var(--twoip-outline);
  border-radius: var(--twoip-radius-small);
  cursor: pointer;
  max-width: 100%;
  min-width: 0;
  text-align: start;
}
body .twoip-select-control > :not(.twoip-disclosure-arrow) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body .twoip-select-control .twoip-icon {color:currentColor;font-size:16px;position:static;margin:0;flex:none}
body .twoip-select-control:is(:hover,:active) {background:var(--twoip-primary-container);color:var(--twoip-on-primary-container)}
body .twoip-select-control:focus-visible {outline:2px solid var(--twoip-primary);outline-offset:3px}
body .twoip-selector-label {color:var(--twoip-on-surface-variant);flex:none}
body .twoip-filter-group {display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
body .twoip-filter-row {align-items:center;row-gap:12px}
body .text-end .twoip-filter-group {justify-content:flex-end}
body .twoip-selector-list .dropdown-item {border:0;text-decoration:none;background-image:none}
@media(max-width:767px) {body .text-end .twoip-filter-group {justify-content:flex-start}}

/* Icon actions share a native hit area, independently of glyph shape or label buttons. */
body .twoip-icon-action {
  --twoip-icon-action-ink: var(--twoip-primary);
  --twoip-icon-action-container: var(--twoip-primary-container);
  --twoip-icon-action-on-container: var(--twoip-on-primary-container);
}
body .twoip-icon-action,
body .btn.btn.twoip-icon-action {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 var(--twoip-icon-action-size); box-sizing: border-box; width: var(--twoip-icon-action-size); height: var(--twoip-icon-action-size); min-width: var(--twoip-icon-action-size); min-height: var(--twoip-icon-action-size);
  padding: 0; margin: 0; border: 0; border-radius: var(--twoip-radius-full);
  background: transparent; color: var(--twoip-icon-action-ink); text-decoration: none;
  line-height: 1; vertical-align: middle; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
body .twoip-icon-action.twoip-destructive-control {
  --twoip-icon-action-ink: var(--twoip-error); --twoip-icon-action-container: var(--twoip-error-container);
  --twoip-icon-action-on-container: var(--twoip-error);
}
body .twoip-icon-action--warning {
  --twoip-icon-action-ink: var(--twoip-warning); --twoip-icon-action-container: var(--twoip-warning-container);
  --twoip-icon-action-on-container: var(--twoip-on-warning-container);
}
body .twoip-icon-action--success {
  --twoip-icon-action-ink: var(--twoip-success); --twoip-icon-action-container: var(--twoip-success-container);
  --twoip-icon-action-on-container: var(--twoip-success);
}
body .twoip-icon-action > .twoip-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  position: static; margin: 0; padding: 0; color: currentColor; font-size: 20px; line-height: 1; transform: none;
}
body .twoip-icon-action:not(:disabled):not(.disabled):not([aria-disabled="true"]):not(.not-allowed):is(:hover,:focus-visible,:active) {
  background: var(--twoip-icon-action-container); color: var(--twoip-icon-action-on-container);
}
body .twoip-icon-action:focus-visible { outline: 2px solid var(--twoip-icon-action-ink); outline-offset: 2px; }
body .twoip-icon-action:not(:disabled):not(.disabled):not([aria-disabled="true"]):active { box-shadow: inset 0 0 0 2px var(--twoip-icon-action-ink); }
body .twoip-icon-action:is(:disabled,.disabled,[aria-disabled="true"]) { opacity: .38; cursor: default; box-shadow: none; }
body .t3-mainbody .t3-content table.table :is(th,td).twoip-action-cell,
body .modal table.table :is(th,td).twoip-action-cell { vertical-align: middle; }
body .t3-mainbody .t3-content table.table tbody td.twoip-action-cell,
body .modal table.table tbody td.twoip-action-cell { padding-block: var(--twoip-table-cell-padding-block); }

body .twoip-icon-action.active { background: var(--twoip-icon-action-container); color: var(--twoip-icon-action-on-container); }

/* Ordinary account icons reuse shared geometry and states; semantic variants stay authoritative. */
body .account :is(h2 > .twoip-icon,.account-info-icon) { color: var(--twoip-account-primary); position: static; }
body .account .twoip-icon-action:not(.twoip-destructive-control):not(.twoip-icon-action--warning):not(.twoip-icon-action--success) { --twoip-icon-action-ink: var(--twoip-account-primary); }
body .item-page_speedtest :is(.fa-circle-info,.fa-circle-question):not(.twoip-icon-action .twoip-icon):not(.alert .twoip-icon) { color: var(--twoip-account-primary); display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

/* Shared navigation/utility geometry; component surfaces have separate owners. */
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav :is(a.twoip-sidebar-link,a.twoip-navigation-link) {
  display: flex; align-items: center; min-height: 44px; margin-top: 12px; padding: 8px 10px;
  font-family: "2ip"; font-size: 16px; line-height: 22px;
  text-decoration: none; box-shadow: none;
}
/* Tonal surfaces belong to utility links and inline header pills, never main sidebar navigation. */
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav a.twoip-sidebar-link,
body #t3-mainnav.twoip-navigation--inline .sidebar-nav a.twoip-navigation-link {
  color: var(--twoip-on-surface-variant); background: var(--twoip-surface-container-low);
  border: 0; border-radius: var(--twoip-radius-medium);
  transition: color .15s ease, background-color .15s ease;
}
body #t3-mainnav.twoip-navigation--inline .sidebar-nav a.twoip-navigation-link:is(:hover,:focus-visible) {
  color: var(--twoip-on-primary-container); background: var(--twoip-primary-container);
}
body #t3-mainnav.twoip-navigation--inline .sidebar-nav a.twoip-navigation-link:active { background: var(--twoip-surface-container-high); }
body :is(#t3-mainnav,#t3-off-canvas) :is(.twoip-sidebar-link,.twoip-navigation-link) .twoip-menu-label { display: flex; align-items: center; gap: 8px; }
body :is(#t3-mainnav,#t3-off-canvas) :is(.twoip-sidebar-link,.twoip-navigation-link) .twoip-icon {
  display: grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px;
  font-size: 18px; line-height: 1; color: currentColor; margin: 0; position: static;
}
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav a.twoip-sidebar-link:is(:hover,:focus-visible),
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav > li:is(.active,.current) > .twoip-sidebar-link,
body :is(#t3-mainnav,#t3-off-canvas) .twoip-sidebar-utilities > li:is(.active,.current) > .twoip-sidebar-link {
  color: var(--twoip-on-primary-container); background: var(--twoip-primary-container);
}
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav a.twoip-sidebar-link:active { background: var(--twoip-surface-container-high); }
body :is(#t3-mainnav,#t3-off-canvas) .twoip-sidebar-link:focus-visible,
body #t3-mainnav.twoip-navigation--inline .twoip-navigation-link:focus-visible { outline: 2px solid var(--twoip-primary); outline-offset: 3px; }

/* Native switch primitive: checked means enabled/success, not a primary action. */
body .twoip-switch-label { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; font: inherit; color: var(--twoip-on-surface); cursor: pointer; }
body input.twoip-switch[type="checkbox"] {
  appearance: none; position: relative; flex: 0 0 44px; width: 44px; height: 44px;
  margin: 0; padding: 0; border: 0; border-radius: var(--twoip-radius-small);
  background: transparent; box-shadow: none; cursor: pointer; vertical-align: middle;
}
body input.twoip-switch::before { content: ""; position: absolute; width: 40px; height: 24px; left: 2px; top: 10px; box-sizing: border-box; border: 1px solid var(--twoip-outline); border-radius: 24px; background: var(--twoip-surface-container-high); }
body input.twoip-switch::after { content: ""; position: absolute; width: 16px; height: 16px; left: 6px; top: 14px; border-radius: 50%; background: var(--twoip-on-surface-variant); transition: left .15s ease, background-color .15s ease, box-shadow .15s ease; }
body input.twoip-switch:checked::before { background: var(--twoip-success-container); border-color: var(--twoip-success); }
body input.twoip-switch:checked::after { left: 22px; background: var(--twoip-success); }
body input.twoip-switch:not(:disabled):is(:hover,:focus-visible)::after { box-shadow: 0 0 0 6px color-mix(in srgb, var(--twoip-on-surface-variant) 16%, transparent); }
body input.twoip-switch:checked:not(:disabled):is(:hover,:focus-visible)::after { box-shadow: 0 0 0 6px color-mix(in srgb, var(--twoip-success) 16%, transparent); }
body input.twoip-switch:not(:disabled):active::after { box-shadow: 0 0 0 7px color-mix(in srgb, var(--twoip-on-surface-variant) 24%, transparent); }
body input.twoip-switch:checked:not(:disabled):active::after { box-shadow: 0 0 0 7px color-mix(in srgb, var(--twoip-success) 24%, transparent); }
body input.twoip-switch:focus-visible { outline: 2px solid var(--twoip-outline); outline-offset: 2px; }
body input.twoip-switch:checked:focus-visible { outline-color: var(--twoip-success); }
body input.twoip-switch:disabled { cursor: default; opacity: 1; }
body .twoip-switch-label:has(.twoip-switch:disabled) { cursor: default; }
@media (prefers-reduced-motion: reduce) { body input.twoip-switch::after { transition: none; } }

/* Opt-in bounded metadata; prose never opts in. */
/* Compact values opt in at owned render boundaries; prose retains normal wrapping. */
.twoip-truncate {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.twoip-compact-content { min-width: 0; max-width: 100%; }
.twoip-compact-content:has(> .twoip-icon) { display: flex; align-items: baseline; }
.twoip-compact-content > .twoip-icon { flex-shrink: 0; }
.twoip-compact-content > .twoip-truncate { min-width: 0; }
.twoip-compact-link { min-width: 0; max-width: 100%; }
.twoip-compact-link:not(.twoip-truncate) { display: inline-flex; }
.twoip-compact-link > .twoip-inline-label { min-width: 0; }
.twoip-compact-cell > .twoip-truncate { max-width: var(--twoip-compact-cell-max, 24rem); }
.twoip-compact-table:not(.dataTable):not(.twoip-table-comparison) {
  table-layout: fixed;
  width: 100%;
}
.twoip-compact-table:not(.dataTable):not(.twoip-table-comparison) .twoip-compact-cell > .twoip-truncate {
  max-width: 100%;
}
.twoip-truncate--mobile { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 767.98px) {
  .twoip-truncate--mobile { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .twoip-compact-cell > .twoip-truncate { max-width: min(var(--twoip-compact-cell-max, 24rem), 44vw); }
}
.twoip-truncate-tooltip { --bs-tooltip-max-width: min(350px, calc(100vw - 24px)); }
.twoip-truncate-tooltip .tooltip-inner { overflow-wrap: anywhere; }

/* Native monitoring image geometry; source selection belongs to theme.js. */
body .twoip-themed-graph {
  display: block;
}
body .twoip-themed-graph img {
  display: block;
  width: 100%;
  height: auto;
}


/* Compact supplementary actions share one accessible, wrapping presentation. */
body .twoip-form-support {
  padding: 12px;
  border: 1px solid var(--twoip-outline-variant);
  border-radius: var(--twoip-radius-small);
  background: var(--twoip-surface-container-low);
}
.twoip-compact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 8px;
}
body .twoip-compact-action {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--twoip-outline);
  border-radius: var(--twoip-radius-small);
  background: transparent;
  color: var(--twoip-on-surface-variant);
  font: inherit;
  cursor: pointer;
}
body .twoip-compact-action:is(:hover,[aria-pressed="true"]) {
  background: var(--twoip-primary-container);
  border-color: var(--twoip-primary);
  color: var(--twoip-on-primary-container);
}
body .twoip-compact-action:focus-visible {
  outline: 2px solid var(--twoip-primary);
  outline-offset: 2px;
}
body .twoip-compact-action:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Result status ink is independent of action/button presentation. */
body .twoip-icon[data-twoip-status="success"] {
  --twoip-status-color: var(--twoip-success);
  color: var(--twoip-status-color);
}
body .twoip-icon[data-twoip-status="error"] {
  --twoip-status-color: var(--twoip-error);
  color: var(--twoip-status-color);
}
body .twoip-icon[data-twoip-status="info"] {
  --twoip-status-color: var(--twoip-primary);
  color: var(--twoip-status-color);
}

.twoip-result-surface,
.twoip-loading-surface {
  background-color: var(--twoip-surface);
}
.twoip-result-divider {
  border-right: 1px solid var(--twoip-outline-variant);
}
.twoip-result-error {
  background-color: var(--twoip-error-container);
}

/* Desktop navigation is a compact group with fixed internal icon slots. */
body #t3-mainnav .sidebar-nav { column-gap: var(--twoip-navigation-desktop-gap); }
body #t3-mainnav .sidebar-nav > li > a.twoip-sidebar-link,
body #t3-mainnav .twoip-sidebar-utilities > li > a.twoip-sidebar-link { margin: 0; gap: var(--twoip-navigation-item-gap); padding: 8px var(--twoip-navigation-inline-padding); }
body #t3-mainnav .sidebar-nav > [class*="twoip-menu-role-"] > a::before { display: grid; place-items: center; height: var(--twoip-navigation-icon-slot); line-height: 1; }

:root { --twoip-navigation-item-gap: 8px; --twoip-navigation-inline-padding: 10px; --twoip-navigation-icon-slot: 20px; }

/* Resilient header variant: shared chrome, no ad/module/runtime dependency. */
body .twoip-resilient-header .twoip-header-row {
  padding-block: 0;
}
.twoip-resilient-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--twoip-navigation-item-gap);
  min-width: 0;
}
.twoip-resilient-header__nav .sidebar-nav {
  display: flex;
  align-items: center;
  gap: var(--twoip-navigation-item-gap) var(--twoip-navigation-desktop-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}
.twoip-resilient-header__drawer .sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.twoip-resilient-header .twoip-mobile-menu-trigger {
  display: none;
}
.twoip-resilient-header__drawer {
  display: flex;
  flex-direction: column;
  gap: var(--twoip-navigation-item-gap);
}
body .twoip-resilient-header [data-theme-mode-icon]::before {
  display: grid;
  place-items: center;
  width: 1em;
  height: 1em;
  line-height: 1;
}
@media (max-width: 1099px) {
body .twoip-resilient-header .twoip-header-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    padding: 0 4px 0 0;
  }
.twoip-resilient-header__nav {
    display: none;
  }
body .twoip-resilient-header .twoip-error__logo { grid-column: 1; }
body .twoip-resilient-header .header-utilities { grid-column: 2; }
}

/* Inline navigation must not inherit the desktop sidebar width. */
body #t3-mainnav.twoip-navigation--inline .t3-navbar { width: auto; max-width: 100%; display: flex; align-items: center; }
body #t3-mainnav.twoip-navigation--inline .sidebar-nav { flex-wrap: wrap; justify-content: center; }
body #t3-mainnav.twoip-navigation--inline .sidebar-nav > li { display: flex; align-items: center; }
/* Desktop composition omits the Site group; the mobile drawer retains its destinations. */
body #t3-mainnav .sidebar-nav > li.twoip-menu-role-site { display: none; }

.twoip-language-fallback { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--twoip-navigation-item-gap); padding: 8px; }
.twoip-language-fallback a { display: inline-flex; align-items: center; min-height: 44px; }

/* Family slots share initial/probe rendering; absent rows have no layout space. */
body .ipblock .showip_mod .twoip-addresses { margin-block-end: 24px; }
body .ipblock .showip_mod .twoip-addresses > .ip { margin-block: 0; }
body .ipblock .showip_mod .twoip-addresses [hidden] { display: none !important; }
body .ipblock .showip_mod .twoip-addresses [data-address-unknown] { color: var(--twoip-on-primary); }

/* Native radio item: one first-line slot, text slot and shared group geometry. */
:root { --twoip-radio-size: 18px; --twoip-radio-gap: 6px; --twoip-radio-target: 44px; --twoip-radio-group-gap: 12px 24px; }
body .twoip-radio { display: inline-flex; align-items: center; gap: var(--twoip-radio-gap); margin: 0; max-inline-size: 100%; }
body .twoip-radio > label { white-space: normal; display: inline-flex; align-items: flex-start; gap: var(--twoip-radio-gap); box-sizing: border-box; min-block-size: var(--twoip-radio-target); min-inline-size: var(--twoip-radio-target); max-inline-size: 100%; padding-block: max(0px, calc((var(--twoip-radio-target) - 1lh) / 2)); padding-inline: 0; margin: 0; position: static; text-align: start; cursor: pointer; }
body .twoip-radio .twoip-radio-control { display: flex; align-items: center; justify-content: center; flex: 0 0 var(--twoip-radio-size); inline-size: var(--twoip-radio-size); block-size: 1lh; position: static; }
body .twoip-radio .twoip-radio-text { display: block; flex: 1 1 auto; min-inline-size: 0; position: static; white-space: normal; word-break: normal; overflow-wrap: normal; }
body .twoip-radio input[type=radio] { appearance: auto; opacity: 1; position: static; flex: 0 0 var(--twoip-radio-size); inline-size: var(--twoip-radio-size); block-size: var(--twoip-radio-size); margin: 0; accent-color: var(--twoip-primary); cursor: pointer; pointer-events: auto; }
body .twoip-radio input[type=radio]:disabled, body .twoip-radio > label:has(input:disabled) { cursor: not-allowed; }
body .twoip-radio-group { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: var(--twoip-radio-group-gap); min-inline-size: 0; padding: 0; border: 0; }
body .twoip-radio-group--center { justify-content: center; }
body .twoip-radio-group--vertical { flex-direction: column; }
body .twoip-radio-group--grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(9rem,100%),1fr)); gap: 8px 16px; }
body .twoip-radio-group > .twoip-current-grid { flex: 0 1 auto; width: auto; padding: 0; margin: 0; min-inline-size: 0; }
body .twoip-radio-group > .twoip-current-grid > .twoip-form-group { margin: 0; padding: 0; }
body .twoip-radio-group > legend { flex-basis: 100%; }

body .twoip-radio-group .twoip-radio { margin: 0; padding: 0; min-block-size: 0; }

/* Compact diagnostic result list; Status.php owns tones, ResultList.php owns localized captions. */
body .twoip-result-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 0 24px; margin-block: 16px; }
body .twoip-result-row { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); align-items: center; gap: 12px; min-block-size: 64px; padding: 8px 16px; border: 0; border-block-end: 1px solid var(--twoip-outline-variant); border-radius: 0; background: transparent; box-shadow: none; font-size: var(--twoip-type-body); line-height: 1.4; }
body .twoip-result-name { min-inline-size: 0; color: var(--twoip-on-surface); overflow-wrap: anywhere; }
body .twoip-result-meta { display: flex; align-items: center; gap: 4px; color: var(--twoip-on-surface-variant); font-size: 85%; }
body .twoip-result-meta .flag { inline-size: 20px; block-size: auto; flex-shrink: 0; }
body .twoip-result-status { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 8px; min-inline-size: 0; color: var(--twoip-status-text); font-size: var(--twoip-type-label); }
body .twoip-result-status > :first-child { min-inline-size: 0; overflow-wrap: anywhere; }
body .twoip-result-status-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 20px; block-size: 20px; flex: 0 0 20px; color: var(--twoip-on-surface-variant); vertical-align: middle; }
body .twoip-result-status-icon .twoip-icon { display: inline-flex; align-items: center; justify-content: center; position: static; margin: 0; inline-size: 20px; block-size: 20px; font-size: 18px; line-height: 1; }
body .twoip-icon[data-twoip-status=warning] { color: var(--twoip-warning); }
@media (min-width: 992px) { body .twoip-result-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }

body .twoip-result-heading { display: flex; align-items: center; gap: 4px; min-inline-size: 0; }
body :is(.twoip-result-name-text,.twoip-result-meta-text) { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .twoip-result-heading > [data-bs-toggle=tooltip] { display: inline-flex; align-items: center; flex-shrink: 0; }

/* GLOBAL SEMANTIC COLOR RULE: text is neutral; only status icons carry a tone. */
body .twoip-status { display: inline-flex; align-items: flex-start; gap: 8px; max-inline-size: 100%; color: var(--twoip-status-text); }
body .twoip-status-text { min-inline-size: 0; color: var(--twoip-status-text); }
body table:has([data-twoip-compact-status]):not(.dataTable):not(.twoip-table-comparison) { table-layout: fixed; inline-size: 100%; }
/* Compact status columns clip only captions; full content/summaries keep normal wrapping. */
body .twoip-status--compact { align-items: center; min-inline-size: 0; inline-size: 100%; }
body [data-twoip-compact-status]:not(:where(.alert *,.twoip-execution-summary *,.twoip-help-block *,.twoip-service-raw *,pre *,code *)) { min-width: 0; min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
body [data-twoip-compact-status]:focus-visible { outline: 2px solid var(--twoip-link-focus); outline-offset: 2px; }
body .twoip-status-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 20px; block-size: 20px; flex: 0 0 20px; margin: 0; position: static; font-size: 18px; line-height: 1; }

body .twoip-icon[data-twoip-status=neutral] { color: var(--twoip-status-muted); }

/* Final execution surfaces: completion is green regardless of finding. */
body .alert.twoip-execution-summary[data-execution-state=completed] { --twoip-status-ink: var(--twoip-success); --twoip-status-fill: var(--twoip-success-container); }
body .alert.twoip-execution-summary[data-execution-state=error] { --twoip-status-ink: var(--twoip-error); --twoip-status-fill: var(--twoip-error-container); }
body .alert.twoip-execution-summary[data-execution-state=partial] { --twoip-status-ink: var(--twoip-warning); --twoip-status-fill: var(--twoip-warning-container); }
body .alert.twoip-execution-summary[data-execution-state=pending] { --twoip-status-ink: var(--twoip-on-primary-container); --twoip-status-fill: var(--twoip-primary-container); }
/* Port-check final cards deliberately reflect availability, not execution completion. */
body .alert.twoip-execution-summary.twoip-port-result[data-port-state=open] { --twoip-status-fill: var(--twoip-success-container); }
body .alert.twoip-execution-summary.twoip-port-result[data-port-state=closed] { --twoip-status-fill: var(--twoip-error-container); }
body .alert.twoip-execution-summary.twoip-port-result { --twoip-status-ink: var(--twoip-status-text); color: var(--twoip-status-text); }
body .twoip-port-result > .twoip-status { display: flex; align-items: center; justify-content: center; gap: var(--twoip-space-2, 8px); inline-size: fit-content; margin-inline: auto; }
/* Email primary final palette is binary; diagnostics retain raw SMTP uncertainty. */
body .alert.twoip-execution-summary.twoip-email-result { --twoip-status-ink: var(--twoip-status-text); color: var(--twoip-status-text); }
body .alert.twoip-execution-summary.twoip-email-result[data-email-state=rejected] { --twoip-status-fill: var(--twoip-error-container); }
body .twoip-email-result > .twoip-status { align-items: center; justify-content: center; }

/* One secondary-utility family, separate from ordinary menu/group density. */
:root { --twoip-sidebar-utility-gap: 12px; }
body :is(#t3-mainnav,#t3-off-canvas) .twoip-sidebar-utilities { display: grid; gap: var(--twoip-sidebar-utility-gap); list-style: none; padding: 0; margin: var(--twoip-sidebar-utility-gap) 0 0; }
body :is(#t3-mainnav,#t3-off-canvas) .twoip-sidebar-utilities > li { margin: 0; padding: 0; }
body :is(#t3-mainnav,#t3-off-canvas) .twoip-sidebar-utilities > li > a.twoip-sidebar-link { margin: 0; }

/* Informational promotion reuses utility geometry; its palette stays separate. */
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav a.twoip-sidebar-promo {
  --twoip-sidebar-promo-icon-size: calc(var(--twoip-navigation-icon-slot) + var(--twoip-sidebar-utility-gap));
  --twoip-sidebar-promo-hover: color-mix(in srgb, var(--twoip-on-primary-container) 8%, var(--twoip-primary-container));
  --twoip-sidebar-promo-pressed: color-mix(in srgb, var(--twoip-on-primary-container) 12%, var(--twoip-primary-container));
  color: var(--twoip-on-primary-container); background: var(--twoip-primary-container);
  margin-block-start: var(--twoip-sidebar-utility-gap); font-weight: 500; transition: none;
}
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav a.twoip-sidebar-promo:is(:hover,:focus-visible) { background: var(--twoip-sidebar-promo-hover); color: var(--twoip-on-primary-container); }
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav a.twoip-sidebar-promo:active { background: var(--twoip-sidebar-promo-pressed); }
body :is(#t3-mainnav,#t3-off-canvas) .twoip-sidebar-promo .twoip-menu-label { flex: 1; min-width: 0; }
body :is(#t3-mainnav,#t3-off-canvas) .twoip-sidebar-promo__icon {
  display: grid; place-items: center; flex: 0 0 var(--twoip-sidebar-promo-icon-size);
  width: var(--twoip-sidebar-promo-icon-size); height: var(--twoip-sidebar-promo-icon-size);
  border-radius: var(--twoip-radius-small);
  background: color-mix(in srgb, var(--twoip-primary) 12%, var(--twoip-primary-container));
}
body :is(#t3-mainnav,#t3-off-canvas) .twoip-sidebar-promo__text { flex: 1; min-width: 0; }

/* Shared header hierarchy: accent glyph/indicator, neutral ordinary label. */
body .t3-header .header-utilities :is(.twoip-language-toggle,.twoip-theme-toggle,.account a) > span:not(.twoip-icon) { color: var(--twoip-on-surface); }
body .t3-header .header-utilities :is(.twoip-language-toggle,.twoip-theme-toggle,.account a) .twoip-icon,
body .t3-header .header-utilities .account a.twoip-icon::before { color: var(--twoip-primary); }
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav a.twoip-navigation-link { margin: 0; gap: var(--twoip-navigation-item-gap); padding: 8px var(--twoip-navigation-inline-padding); }
@media (max-width: 1099px) {
  body .t3-header .header-utilities .account a { padding: 0; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  body .t3-header .header-utilities .account a { font-size: calc(var(--twoip-type-body) * 1.2); }
}

/* Narrow desktop chrome needs viewport space before the standard 1200px container step. */
@media (min-width: 1100px) and (max-width: 1199px) {
  body .t3-header > .container { width: calc(100% - 2 * var(--twoip-header-edge-inset)); max-width: none; }
  body .t3-header .twoip-header-row, body .t3-header .header-utilities { padding-inline: 0; }
}

@media (min-width: 1100px) {
  body .t3-header .logo { width: auto; padding: 0; margin: 0; text-align: left; }
  body .t3-header .header-ad-column { width: auto; padding-inline: 0; }
  body .t3-header .header-utilities { width: auto; grid-column: 3; }
}

/* Contextual result actions are compact; plain URLs keep their own text-link contract. */
.twoip-service-contextual-value { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 8px; white-space: nowrap; max-inline-size: 100%; min-inline-size: 0; }
.twoip-service-contextual-text { flex: 0 1 auto; min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
.twoip-service-contextual-action { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; white-space: nowrap; }
body .twoip-service-whois-link { display: inline-flex; align-items: center; gap: 4px; min-block-size: 0; font-size: var(--twoip-type-label); font-weight: 400; line-height: 20px; white-space: nowrap; position: relative; }

/* Invisible click extension does not turn scalar information rows into button-height rows. */
.twoip-service-whois-link::after { content: ""; position: absolute; inset-inline: 0; block-size: 44px; inset-block-start: calc(50% - 22px); }

.twoip-status + .twoip-service-contextual-action { margin-inline-start: 8px; }

/* Hidden sizing never owns underline or separates the visible label from its icon. */
.twoip-disclosure-control:has(> .twoip-disclosure-sizer) { display: inline-grid; }
.twoip-disclosure-sizer { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; visibility: hidden; pointer-events: none; }
.twoip-disclosure-sizing-text { display: inline-grid; }
.twoip-disclosure-sizing-text > span { grid-area: 1 / 1; }
.twoip-disclosure-sizing-icon { inline-size: 16px; flex: 0 0 16px; }
.twoip-disclosure-visible { grid-area: 1 / 1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-inline-size: 0; }
.twoip-disclosure-visible-label { flex: 0 1 auto; inline-size: fit-content; max-inline-size: 100%; }

/* Compact checkbox option collections: hit areas remain 44px, wrappers add no legacy margins. */
.twoip-checkbox-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--twoip-service-option-row-gap) var(--twoip-service-field-gap); }
.twoip-checkbox-grid > * { min-inline-size: 0; }
body .twoip-service-options .twoip-checkbox { margin: 0; padding: 0; }
.twoip-service-options { display: grid; gap: var(--twoip-service-option-row-gap); }
body .twoip-service-options > p { margin: 0; }
@media (min-width: 768px) { .twoip-checkbox-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 360px) { .twoip-checkbox-grid { grid-template-columns: minmax(0,1fr); } }

/* Findings with optional contextual actions remain ResultList, never individual cards. */
body .twoip-result-list--linear { grid-template-columns: minmax(0,1fr); }
body .twoip-result-row--compact { min-block-size: 0; padding-block: var(--twoip-service-result-row-padding); }
body .twoip-result-row--actions { grid-template-columns: minmax(0,1fr) minmax(0,2fr); }
.twoip-result-outcome { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; min-inline-size: 0; }
.twoip-result-outcome > .twoip-result-status { justify-self: start; inline-size: fit-content; max-inline-size: 100%; }
.twoip-result-actions { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--twoip-type-label); }
.twoip-result-actions > .twoip-inline-link { display: inline-flex; align-items: center; gap: 4px; }
.twoip-result-actions .twoip-icon:not(.twoip-status-icon) { font-size: var(--twoip-contextual-icon-size); margin: 0; position: static; color: currentColor; }
@media (max-width: 767px) { body .twoip-result-row--actions { grid-template-columns: minmax(0,1fr); gap: 4px; } }

body .twoip-radio-group--atomic .twoip-radio > label { white-space:nowrap;align-items:center; }
body .twoip-radio-group--atomic .twoip-radio-text { white-space:nowrap; }

/* Results metadata is one table header, independent of field hints and pagination. */
body .twoip-results-header { margin:0; padding:0 0 var(--twoip-service-option-row-gap); border:0; background:none; }
body .twoip-results-header .twoip-results-meta { text-align:start; margin:0; padding:0; font-size:var(--twoip-type-label); font-weight:400; line-height:1.4; color:var(--twoip-on-surface-variant); border:0; background:none; }
body :is(.twoip-scope-switch,[data-twoip-single-panel-tabs],.twoip-search-form) ~ .twoip-data-panel:has(> .twoip-results-header),
body :is(.twoip-scope-switch,[data-twoip-single-panel-tabs]) + .twoip-results-header { margin-block-start:var(--twoip-service-form-control-gap); }
body .twoip-results-ad { margin-block-start:var(--twoip-service-form-section-gap); }

/* Structured help panels own their inset; generic text hints must not reset it. */
body .twoip-help-block--info { --twoip-help-padding:var(--twoip-service-results-row-padding,12px); }
body .twoip-form-group .twoip-help-block.twoip-help-block--options { grid-template-columns:minmax(0,1fr); gap:var(--twoip-service-option-row-gap); }
body .twoip-help-heading { display:flex; align-items:center; gap:var(--twoip-service-option-row-gap); min-width:0; }
body .twoip-help-heading > .twoip-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 20px; width:20px; height:20px; margin:0; font-size:20px; line-height:1; color:var(--twoip-primary); }
body .twoip-help-block--options > .twoip-compact-actions { margin:0; }
body .twoip-compact-actions--equal > .twoip-compact-action { box-sizing:border-box; height:var(--twoip-control-height); text-decoration:none; }
body .twoip-compact-actions--equal > .twoip-compact-action:not(.twoip-compact-action--wide) { width:calc(var(--twoip-control-height) + var(--twoip-control-padding-inline)); flex:none; }
@media (min-width:1280px) {
 body .twoip-compact-actions--balanced { display:grid; grid-template-columns:repeat(var(--twoip-option-columns),minmax(44px,1fr)); }
 body .twoip-compact-actions--equal.twoip-compact-actions--balanced > .twoip-compact-action { width:100%; }
}

/* One overflow owner for native/AJAX tables and the DataTables table row.
   Intrinsic cell widths preserve readable text without widening the page. */
body :is(.t3-content,.modal) :is(.table-responsive,.twoip-service-table-scroll,.twoip-table-scroll) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}
body :is(.t3-content,.modal) .twoip-table-controls-container {
  overflow: visible;
}
body :is(.t3-content,.modal) :is(.dt-container,.dt-layout-table,.tab-content,.tab-pane,.modal-body) {
  min-inline-size: 0;
  max-inline-size: 100%;
}
body :is(.t3-content,.modal) :is(.table-responsive,.twoip-service-table-scroll,.twoip-table-scroll) > table {
  table-layout: auto;
  width: 100%;
}
body :is(.t3-content,.modal) :is(.table-responsive,.twoip-service-table-scroll,.twoip-table-scroll):focus-visible {
  outline: 2px solid var(--twoip-primary);
  outline-offset: -2px;
}

/* Copy feedback preserves each variant's palette and geometry; only its glyph changes. */
body .twoip-copy-control { --twoip-copy-state-hover-opacity: 8%; --twoip-copy-state-pressed-opacity: 12%; }
body .twoip-copy-control.twoip-icon-action:not(:disabled):not(.disabled):not([aria-disabled="true"]):not(.not-allowed):is(:hover,:focus-visible,:active) {
  color: var(--twoip-icon-action-ink);
  background: color-mix(in srgb, var(--twoip-icon-action-ink) var(--twoip-copy-state-hover-opacity), transparent);
}
body .twoip-copy-control.twoip-icon-action:not(:disabled):not(.disabled):not([aria-disabled="true"]):not(.not-allowed):active {
  background: color-mix(in srgb, var(--twoip-icon-action-ink) var(--twoip-copy-state-pressed-opacity), transparent);
}
body .ipblock .showip_mod .ip .twoip-copy-control:is(:hover,:focus-visible,:active) {
  color: var(--twoip-button-on-primary);
  background: var(--twoip-primary);
  box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--twoip-button-on-primary) 12%, transparent);
}
body .ipblock .showip_mod .ip .twoip-copy-control:focus-visible {
  outline: 2px solid var(--twoip-on-primary);outline-offset: 2px;
}
body .twoip-terminal .twoip-terminal-copy:is(:hover,:focus-visible,:active) {
  color: var(--twoip-primary);background: color-mix(in srgb, var(--twoip-primary) 8%, transparent);
}
body .twoip-terminal .twoip-terminal-copy:active {background: color-mix(in srgb, var(--twoip-primary) 12%, transparent);}

/* Account captions share truncation, keeping icons outside the text leaf. */
.account .account-padding { min-width: 0; }
.account .twoip-account-field-label { display: flex; align-items: baseline; min-width: 0; max-width: 100%; }
.account .twoip-account-field-label > .twoip-icon { flex: 0 0 var(--twoip-icon-size, 1.25em); width: var(--twoip-icon-size, 1.25em); }
.account .twoip-account-field-label > [data-twoip-truncate] { flex: 1 1 0%; }

/* Full hero IP addresses, independent of the block's historical IPv4/IPv6 name. */
body .ipblock .showip_mod .ip {
  min-width: 0; max-width: 100%; padding-inline: 16px;
}
body .ipblock .showip_mod .twoip-ip-address {
  min-width: 0; max-width: 100%; white-space: normal;
  overflow: visible; text-overflow: clip; overflow-wrap: normal;
  text-align: center;
}
body .ipblock .showip_mod .ip:not(.ipv6):has([data-ip-family="6"]) {
  font-size: clamp(20px, 4.5vw, 32px);
}
body .ipblock .showip_mod .ip.ipv6 {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px; line-height: 1.4;
}
body .ipblock .showip_mod .ipv6title { flex: 0 0 100%; }
body .ipblock .showip_mod .ip.ipv6 .ipv6addr {
  flex: 0 1 auto; max-width: calc(100% - 52px);
  font-size: clamp(16px, 3.5vw, 24px); line-height: 1.4;
}
body .ipblock .showip_mod .ip :is(.copy-clipboard,.copy-clipboard-v6) { flex-shrink: 0; }

/* Configured ad geometry is known before its module children are parsed. */
@media (min-width: 1100px) {
  body .twoip-header-row--with-ad { grid-template-rows: var(--twoip-header-ad-height); }
}
@media (max-width: 1099px) {
  body .twoip-header-row--with-ad { grid-template-rows: auto var(--twoip-header-ad-height); }
}
@media (max-width: 767px) {
  body .twoip-header-row--with-ad { grid-template-rows: 44px var(--twoip-header-ad-height); }
}

/* Explicit child columns prevent centered glyphs moving when their following
   language caption or chevron is inserted by the HTML parser. */
body .twoip-header-row { --twoip-header-language-icon-slot: 1.25em; --twoip-header-theme-icon-slot: 1em; --twoip-header-arrow-slot: 12px; }
body .t3-header .header-utilities .twoip-selector-toggle.twoip-language-toggle {
  display: grid;
  grid-template-columns: var(--twoip-header-language-icon-slot) minmax(0, 1fr) var(--twoip-header-arrow-slot);
}
body .t3-header .header-utilities .twoip-selector-toggle.twoip-theme-toggle {
  display: grid;
  grid-template-columns: var(--twoip-header-theme-icon-slot) var(--twoip-header-arrow-slot);
  justify-content: center;
}
body .t3-header .header-utilities :is(.twoip-language-toggle,.twoip-theme-toggle) > .twoip-icon:first-child { grid-column: 1; grid-row: 1; }
body .t3-header .header-utilities .twoip-language-toggle > span { grid-column: 2; grid-row: 1; }
body .t3-header .header-utilities .twoip-language-toggle > .twoip-disclosure-arrow { grid-column: 3; grid-row: 1; }
body .t3-header .header-utilities .twoip-theme-toggle > .twoip-disclosure-arrow { grid-column: 2; grid-row: 1; }
@media (min-width: 1100px) { body .twoip-header-row { --twoip-header-language-icon-slot: 25px; --twoip-header-theme-icon-slot: 20px; } }
@media (max-width: 767px) { body .twoip-header-row { --twoip-header-language-icon-slot: var(--twoip-mobile-header-icon-size); --twoip-header-theme-icon-slot: var(--twoip-mobile-header-icon-size); } }

/* Scalar table timestamps share one mobile date/time presentation. */
body table .twoip-date-cell { white-space: nowrap; }
@media (max-width: 767px) {
  body table .twoip-date-time { display: block; }
}

/* /libs/presentation/result-columns.css */
/* Public label/value results only; genuine tables and independent layouts retain their owners. */
body .twoip-service {
  --twoip-service-result-label-cap: 22%;
  --twoip-service-result-item-min: 24ch;
  --twoip-service-result-column-gap: var(--twoip-service-form-control-gap);
}
body .twoip-service :is(.twoip-service-results--default,.twoip-service-results--wide-label) {
  --twoip-results-columns: fit-content(var(--twoip-service-result-label-cap)) minmax(0,1fr);
}
/* Technical collections adapt to their allocated value column, not viewport breakpoints.
 * Measurement name/value grids retain their separate layout contract. */
body .twoip-service .twoip-service-collection > .twoip-service-collection__grid:not(.twoip-service-collection__grid--measurements) {
  grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--twoip-service-result-item-min)),1fr));
}
/* IPv4/CIDR uses the shared collection's four desktop tracks. The longest
 * IPv4 prefix is 18 characters; tablet/mobile retain width-driven tracks. */
body .twoip-service .twoip-service-collection__grid:has(> .twoip-service-collection__item--ipv4):not(:has(> li:not(.twoip-service-collection__item--ipv4))) {
  --twoip-service-result-item-min: 18ch;
}
@media (min-width:1024px) {
  body .twoip-service .twoip-service-collection__grid:has(> .twoip-service-collection__item--ipv4):not(:has(> li:not(.twoip-service-collection__item--ipv4))) {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}
/* IPv6 reserves the longest supplied prefix, capped at the shared device
 * track count. One very narrow track retains the existing emergency wrap. */
body .twoip-service .twoip-service-collection > .twoip-service-collection__grid.twoip-service-collection__grid--ipv6 {
  --twoip-service-result-tracks: 2;
  grid-template-columns: repeat(auto-fill,minmax(max(min(100%,var(--twoip-service-result-item-min)),calc((100% - (var(--twoip-service-result-tracks) - 1) * var(--twoip-service-form-control-gap)) / var(--twoip-service-result-tracks))),1fr));
}
@media (min-width:768px) {
  body .twoip-service .twoip-service-collection > .twoip-service-collection__grid.twoip-service-collection__grid--ipv6 { --twoip-service-result-tracks: 3; }
}
@media (min-width:1024px) {
  body .twoip-service .twoip-service-collection > .twoip-service-collection__grid.twoip-service-collection__grid--ipv6 { --twoip-service-result-tracks: 4; }
}
/* Share the intrinsic label track across each semantic property set, so values
 * align between rows. Unmarked tables and mixed comparison structures are excluded. */
@supports (grid-template-columns: subgrid) {
  @media (min-width:768px) {
    body .twoip-service .twoip-service-results > dl:has(> .twoip-result-row),
    body .twoip-service .twoip-result-list.twoip-service-results:has(> .twoip-result-row) {
      display: grid; grid-template-columns: var(--twoip-results-columns);
      column-gap: var(--twoip-service-result-column-gap); row-gap: 0;
    }
    body .twoip-service .twoip-service-results > dl > .twoip-result-row,
    body .twoip-service .twoip-result-list.twoip-service-results > .twoip-result-row {
      grid-column: 1 / -1; grid-template-columns: subgrid;
    }
  }
}

/* One result may contain several Details/ResultList property sets (e.g. IP
 * metadata followed by WHOIS). Reuse the existing compact cap for every set;
 * keep normal block flow so section margins and row heights stay unchanged. */
@media (min-width:768px) {
  body .twoip-service .twoip-service-results:has(> :is(.twoip-service-details,.twoip-result-list) ~ :is(.twoip-service-details,.twoip-result-list)) > :is(.twoip-service-details,.twoip-result-list) {
    --twoip-results-columns: minmax(0,var(--twoip-service-result-label-cap)) minmax(0,1fr);
  }
}

/* Atomic IPv4/CIDR leaves must never inherit the prose emergency-wrap rule.
 * Responsive tracks reserve the longest 18-character IPv4/prefix. */
body .twoip-service .twoip-service-collection__grid > .twoip-service-collection__item--ipv4,
body .twoip-service .twoip-service-collection__item--ipv4 .twoip-inline-label {
  white-space: nowrap; overflow-wrap: normal; word-break: normal;
}

/* Source identity + outcome needs room for resolver geography or protocol names.
 * Only explicit specialized producers opt in; ordinary Details keep their cap. */
body .twoip-service .twoip-service-results--source-label {
  --twoip-service-result-label-cap: 40%;
}
/* DNS records are full technical values, not compact status captions. Long TXT
 * and IPv6 answers wrap within the specialized outcome track without clipping. */
body .twoip-service .twoip-service-results--source-label [data-twoip-record-value],
body .twoip-service .twoip-service-results--source-label [data-twoip-record-value] .twoip-inline-label {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
}

/* Property gaps follow the real service column, independently of form/list gaps.
 * Vertical metrics and the approved intrinsic label proportions stay unchanged. */
@media (min-width:768px) {
  body .twoip-service :is(.twoip-service-results--default,.twoip-service-results--wide-label) .twoip-result-row {
    column-gap: var(--twoip-service-result-column-gap);
  }
}
/* Responsive separation is measured against the allocated service column,
 * not viewport width. Reuse the 16px control token; cap at three token steps. */
@container twoip-service (min-width:0px) {
  :is(.twoip-service-results,.twoip-service-results--source-label) {
    --twoip-service-result-column-gap: clamp(var(--twoip-service-form-control-gap),4cqi,calc(var(--twoip-service-form-control-gap) * 3));
  }
}

/* /libs/presentation/totop-layout.css */
/* Fixed vertical behavior stays with the existing To Top controller. */
body a.totop {
  --twoip-totop-button-size: 55px;
  --twoip-totop-container-gap: 20px;
  width: var(--twoip-totop-button-size);
  height: var(--twoip-totop-button-size);
  /* Percentages use the layout viewport, excluding the scrollbar unlike 100vw. */
  right: max(
    calc(var(--twoip-totop-right) + env(safe-area-inset-right, 0px)),
    calc((100% - min(100%, var(--twoip-container-large))) / 2 + var(--twoip-grid-gutter) / 2 - var(--twoip-totop-container-gap) - var(--twoip-totop-button-size))
  );
}

/* /libs/presentation/accordion.css */
/* Explicit first-party accordion surfaces; Bootstrap owns measured collapse height. */
.twoip-accordion {
  display: grid;
  gap: 6px;
  min-width: 0;
}
body .twoip-accordion-item {
  margin: 0;
  box-shadow: none;
  min-width: 0;
  border: 1px solid var(--twoip-outline-variant);
  border-radius: var(--twoip-radius-small);
  background: var(--twoip-surface);
  color: var(--twoip-on-surface);
}
body .twoip-accordion-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--twoip-radius-small);
  background: var(--twoip-surface-container-high);
  color: var(--twoip-on-surface-variant);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
body .twoip-accordion-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  color: inherit;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.twoip-accordion-trigger[aria-expanded="true"] {
  border-radius: var(--twoip-radius-small) var(--twoip-radius-small) 0 0;
  background: var(--twoip-primary-container);
  color: var(--twoip-primary);
}
.twoip-accordion-trigger:is(:hover,:active) {
  background: var(--twoip-primary-container);
}
.twoip-accordion-trigger:focus-visible {
  outline: 2px solid var(--twoip-primary);
  outline-offset: 3px;
}
body .twoip-accordion-trigger .twoip-accordion-icon {
  transform: none; transition: none; animation: none;
  flex: 0 0 16px;
  width: 16px;
  text-align: center;
  position: static;
  margin: 0;
  color: inherit;
  font-size: 16px;
  line-height: 1;
}
.twoip-accordion-item:has(> .twoip-accordion-trigger[aria-expanded="true"]) {
  border-color: var(--twoip-outline-variant);
}
body .twoip-accordion-body {
  padding: 16px;
  border: 0;
  text-align: start;
  border-radius: 0 0 var(--twoip-radius-small) var(--twoip-radius-small);
  background: var(--twoip-surface);
  color: var(--twoip-on-surface);
  font-size: var(--twoip-type-body);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.twoip-accordion-panel.collapsing {
  transition: height 200ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .twoip-accordion-trigger,
  .twoip-accordion-icon,
  .twoip-accordion-panel.collapsing {
    transition: none;
  }
}

/* /templates/2ip/css/form-composition.css */
/* Shared opt-in form composition; field and button skins remain canonical. */
.twoip-form-shell {
  --twoip-form-gap: 24px;
  width: 100%;
  min-width: 0;
}
.twoip-form-stack { display: grid; gap: var(--twoip-form-gap, 24px); min-width: 0; }
.twoip-form-stack > .twoip-form-group { padding-block:0; }
.twoip-form-stack > .twoip-form-group,
.twoip-form-stack .twoip-form-fields > .twoip-current-grid > .twoip-form-group { margin: 0; }
.twoip-form-stack > p { margin: 0; color: var(--twoip-on-surface-variant); }
.twoip-form-fields { row-gap: var(--twoip-form-gap, 24px); }
/* The CDN dialog is moved outside the service root by the modal lifecycle.
 * Keep its normalized controls in the same compact stack after that move. */
.cdn-speedtest.twoip-form-stack { --twoip-form-gap: var(--twoip-service-form-control-gap); }
.cdn-speedtest.twoip-form-stack > .twoip-service-form-controls { display: grid; gap: var(--twoip-form-gap); }
.cdn-speedtest.twoip-form-stack .twoip-form-group { margin: 0; padding-block: 0; }
.twoip-form-links { text-align: center; }
.twoip-form-heading { margin-block: 0 24px; padding: 0; border: 0; }
body .t3-mainbody .t3-content .twoip-form-heading .page-title { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; font-size: 28px; line-height: 1.25; }
.twoip-form-heading-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: var(--twoip-radius-full); color: var(--twoip-primary); background: var(--twoip-primary-container); }
.twoip-form-heading-icon .twoip-icon { position: static; margin: 0; font-size: 20px; line-height: 1; color: currentColor; }
/* Joomla owns the visibility/strength logic and the existing inner input-group. */
.password-group { min-width: 0; }
body .twoip-form-group .password-group > .input-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; }
.password-group > .input-group > :is(.form-control,.twoip-input-field) { grid-column: 1 / -1; width: 100%; min-width: 0; }
.password-group .login-remember { justify-self: end; margin: 0; }
.password-group .login-remember label { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; font: inherit; color: var(--twoip-on-surface); }
.input-password-toggle .icon-fw { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; color: currentColor; }
.input-password-toggle .icon-fw::before { font-family: "Font Awesome 7 Free"; font-style: normal; font-weight: 900; line-height: 1; }
.input-password-toggle .icon-eye::before { content: "\f06e"; }
.input-password-toggle .icon-eye-slash::before { content: "\f070"; }
.password-group meter { display: block; width: 100%; height: 8px; margin-block: 8px; border: 0; border-radius: var(--twoip-radius-full); background: var(--twoip-surface-container-high); }
.password-group meter::-webkit-meter-bar { border: 0; border-radius: var(--twoip-radius-full); background: var(--twoip-surface-container-high); box-shadow: none; }
.password-group meter::-webkit-meter-optimum-value { background: var(--twoip-success); border-radius: var(--twoip-radius-full); }
.password-group meter::-webkit-meter-suboptimum-value { background: var(--twoip-warning); border-radius: var(--twoip-radius-full); }
.password-group meter::-webkit-meter-even-less-good-value { background: var(--twoip-error); border-radius: var(--twoip-radius-full); }
.password-group meter::-moz-meter-bar { background: var(--twoip-success); border-radius: var(--twoip-radius-full); }
.twoip-password-rules, .password-group output { display: block; margin-block: 6px 0; font-size: 14px; line-height: 1.4; color: var(--twoip-on-surface-variant); }
.password-group:has(meter[value="100"]) output { color: var(--twoip-success); }
.password-group:has(meter:not([value="100"]):not([value="0"])) output { color: var(--twoip-warning); }
.twoip-form-captcha { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
body .twoip-form-captcha label.twoip-control-label { position: static; margin: 0; font-size: 14px; line-height: 1.4; color: var(--twoip-on-surface-variant); }
/* CAPTCHA provider output is centered across its allocated full-width form section.
 * Published intrinsic widget dimensions reserve loading geometry, never scale the iframe. */
.twoip-captcha-control { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; align-items:start; inline-size:100%; min-inline-size:0; margin:0; padding:0; container-type:inline-size; }
.twoip-captcha-control > .cf-turnstile { margin:0; flex:none; }
/* Reserve the real translated SDK feedback before load, sharing the widget cell.
 * A live challenge keeps a separate visible error row; no iframe is covered. */
.twoip-captcha-control > :is(.cf-turnstile,.twoip-captcha-feedback) { grid-area:1 / 1; }
.twoip-captcha-control > .twoip-captcha-feedback[hidden] { display:block !important; visibility:hidden; pointer-events:none; }
.twoip-captcha-control:has(> .cf-turnstile:not(:empty)) > .twoip-captcha-feedback:not([hidden]) { grid-area:auto; }

.twoip-captcha-control > .cf-turnstile:is([data-size="normal"],[data-size="flexible"]) { min-block-size:65px; }
.twoip-captcha-control > .cf-turnstile[data-size="normal"] { inline-size:300px; }
.twoip-captcha-control > .cf-turnstile[data-size="compact"] { inline-size:150px; min-block-size:140px; }
.twoip-captcha-control > .cf-turnstile[data-size="flexible"] { inline-size:100%; min-inline-size:300px; }
/* Reserve compact geometry before loading in narrow allocated columns. */
@container (width < 300px) {
 .twoip-captcha-control > .cf-turnstile:is([data-size="normal"],[data-size="flexible"]) { inline-size:150px; min-inline-size:0; min-block-size:140px; }
}
.twoip-captcha-feedback { inline-size:100%; text-align:center; color:var(--twoip-on-surface); overflow-wrap:anywhere; }
@media (max-width: 480px) {
 body .t3-mainbody .t3-content .twoip-form-heading .page-title { font-size: 24px; }
 .password-group .login-remember { grid-column: 1 / -1; justify-self: start; }
}
/* CAPTCHA groups span a grid's full form width, rather than an unlabelled input column. */
body :is(.twoip-form-captcha,.twoip-service-form-captcha):has(> .twoip-captcha-control) { grid-column:1 / -1; inline-size:100%; }

/* Shared horizontal modal forms: fields own content, the form owns rhythm. */
body .modal .modal-body > .twoip-form-horizontal { display:grid; gap:var(--twoip-service-form-control-gap); margin:0; min-inline-size:0; }
body .modal .modal-body > .twoip-form-horizontal > .twoip-form-group { margin:0; padding-block:0; min-block-size:0; }
body .modal .modal-body > .twoip-form-horizontal .form-control { margin-block:0; }
body .modal .modal-body > .twoip-form-horizontal label.twoip-control-label { margin-block:0; }
body .modal .modal-body:has(> .twoip-form-horizontal) { padding-block-end:0; }
body .modal .modal-body:has(> .twoip-form-horizontal) + .modal-footer { padding-block-start:var(--twoip-service-form-section-gap); }

/* CRUD pairs reuse the action group; only their section separation is added. */
.twoip-crud-actions { margin-block-start:var(--twoip-service-form-section-gap); }

.twoip-form-actions[hidden] { display:none; }

/* Shared property editor rows and seven-day timetable. */
.twoip-form-properties > div > .row.twoip-form-group { align-items:start; }
.twoip-form-properties .twoip-control-label { padding-block:var(--twoip-service-form-control-gap); }
.twoip-working-hours { border:0; margin:0; min-inline-size:0; }
.twoip-hours-row { display:grid; grid-template-columns:minmax(80px,1fr) minmax(0,3fr); align-items:center; gap:var(--twoip-service-form-control-gap); padding-block:8px; border-bottom:1px solid var(--twoip-outline-variant); }
.twoip-hours-row label,.twoip-hours-all { display:flex; align-items:center; gap:8px; min-height:44px; margin:0; }
.twoip-hours-times { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px; min-width:0; }
.twoip-hours-times input { min-width:0; width:100%; }
.twoip-hours-times[hidden],.twoip-working-hours [hidden] { display:none; }
.twoip-hours-row [data-hours-off] { grid-column:2; font-size:14px; color:var(--twoip-on-surface-variant); }
@media(max-width:767px){
 .twoip-form-properties .twoip-control-label { padding-block:0; }
 .twoip-hours-row { grid-template-columns:minmax(0,1fr); gap:8px; }
 .twoip-hours-row [data-hours-off] { grid-column:1; }
}
.twoip-form-properties > div:first-child { display:grid; gap:var(--twoip-service-form-control-gap); }
.twoip-form-properties > div:first-child > .twoip-form-group { margin:0; padding-block:0; }

/* Shared body-link/action contract; component indicators and Material buttons retain their owners. */
button.twoip-inline-link { appearance:none; background:transparent; padding:0 0 1px; border-radius:0; box-shadow:none; }
body :is(.t3-mainbody .t3-content,.modal,.t3-footnav,.t3-sl-helper-wrap,.article-content,.tagssimilar,.t3-footer .email,.t3-sl-totop .advertising .mediakit) .twoip-inline-link { color:var(--twoip-link-text); }
body :is(.t3-mainbody .t3-content,.modal,.t3-footnav,.t3-sl-helper-wrap,.article-content,.tagssimilar,.t3-footer .email,.t3-sl-totop .advertising .mediakit) .twoip-inline-link:is(:hover,:focus-visible) { color:var(--twoip-inline-hover); border-bottom-color:var(--twoip-inline-hover); }
body :is(.t3-mainbody .t3-content,.modal,.t3-footnav,.t3-sl-helper-wrap,.article-content,.tagssimilar,.t3-footer .email,.t3-sl-totop .advertising .mediakit) .twoip-inline-link:active { color:var(--twoip-inline-pressed); border-bottom-color:var(--twoip-inline-pressed); }
body .btn .twoip-inline-label { border-bottom:0; text-decoration:none; }
/* Legacy footer columns are presentation wrappers, not separate action rows. */
body .modal .modal-footer > .twoip-current-grid:has(> .btn):not(:has(input:not([type="hidden"]),select,textarea)) { display:contents; }
.twoip-form-actions--end { justify-content:flex-end; }
body .modal-dialog-centered.modal-dialog-scrollable .modal-content { max-block-size:90dvh; }
body :is(.t3-mainbody .t3-content,.modal) textarea.form-control.twoip-form-textarea--compact { block-size:200px; min-block-size:180px; resize:vertical; }

/* Pressed state wins over the shared body hover specificity. */
body :is(.t3-mainbody .t3-content,.modal,.t3-footnav,.t3-sl-helper-wrap,.article-content,.tagssimilar,.t3-footer .email,.t3-sl-totop .advertising .mediakit) .twoip-inline-link:active { color:var(--twoip-inline-pressed); border-bottom-color:var(--twoip-inline-pressed); }

/* Shared primary-action layout. Semantic aliases also cover server/AJAX markup
 * before enhancement. Navigation, copy/icon utilities and Speedtest Start never
 * opt into this component. Button skins and lifecycle visibility stay owned. */
body :is(.twoip-action-group,.twoip-account-actions,.twoip-service-actions,.twoip-form-actions) {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--twoip-service-form-control-gap); min-inline-size:0; max-inline-size:100%;
}
body .twoip-account-actions { justify-content:space-around; margin-inline:0; }
body :is(.twoip-action-group,.twoip-account-actions,.twoip-service-actions,.twoip-form-actions) > :is(.twoip-current-grid,.twoip-service-action-set) {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--twoip-service-form-control-gap); width:auto; min-inline-size:0; max-inline-size:100%; padding:0; margin:0;
}
body .twoip-account-actions > .twoip-current-grid { flex:1 1 max-content; }
body :is(.twoip-action-group,.twoip-account-actions,.twoip-service-actions,.twoip-form-actions) :is(form,.btn) { max-inline-size:100%; }
body :is(.twoip-action-group,.twoip-account-actions,.twoip-service-actions,.twoip-form-actions) .btn { align-self:center; margin:0 !important; }
body :is(.twoip-action-group,.twoip-account-actions,.twoip-service-actions,.twoip-form-actions)[hidden] { display:none; }
body :is(.twoip-action-group,.twoip-account-actions,.twoip-service-actions,.twoip-form-actions) .btn.btn:not(.control-el):not(.input-password-toggle):not(.twoip-icon-action):where(:not(.dropdown-toggle,.twoip-button--icon,.twoip-speedometer-start,.copy-clipboard,[data-clipboard-text],[data-clipboard-target],[role="tab"],[data-bs-toggle="tab"],[data-bs-toggle="pill"])) {
  min-height:var(--twoip-action-min-height); height:auto;
  min-inline-size:var(--twoip-action-min-width); inline-size:auto;
  padding:var(--twoip-action-padding-block) var(--twoip-action-padding-inline);
  border-radius:var(--twoip-action-radius);
  font-family:var(--twoip-action-font-family); font-size:var(--twoip-action-font-size);
  font-weight:var(--twoip-action-font-weight); line-height:var(--twoip-action-line-height);
  gap:var(--twoip-action-icon-gap); white-space:normal; overflow-wrap:anywhere;
}
body :is(.twoip-action-group,.twoip-account-actions,.twoip-service-actions,.twoip-form-actions) .btn[hidden] { display:none !important; }
@media(max-width:991px) {
 body :is(.twoip-action-group,.twoip-account-actions,.twoip-service-actions,.twoip-form-actions) {
   display:flex; flex-direction:column; align-items:stretch; inline-size:100%;
 }
 body :is(.twoip-action-group,.twoip-account-actions,.twoip-service-actions,.twoip-form-actions) > :is(.twoip-current-grid,.twoip-service-action-set,form),
 body .twoip-account-actions > .twoip-current-grid > form {
   flex:none; inline-size:100%; min-inline-size:0; margin:0; padding:0;
 }
 body :is(.twoip-action-group,.twoip-account-actions,.twoip-service-actions,.twoip-form-actions) .btn.btn:not(.control-el):not(.input-password-toggle):not(.twoip-icon-action):where(:not(.dropdown-toggle,.twoip-button--icon,.twoip-speedometer-start,.copy-clipboard,[data-clipboard-text],[data-clipboard-target],[role="tab"],[data-bs-toggle="tab"],[data-bs-toggle="pill"])) {
   inline-size:100%; min-inline-size:0; display:flex; align-items:center; justify-content:center;
   white-space:normal; overflow-wrap:anywhere;
 }
 body :is(.twoip-action-group,.twoip-account-actions,.twoip-service-actions,.twoip-form-actions) .btn > .twoip-icon { flex-shrink:0; }
}

/* Explicit action glyphs share one slot; icon-only utilities keep their owner. */
body .btn.btn[data-twoip-button-icon]:not(.twoip-icon-action):not(.twoip-button--icon) {
  --twoip-button-gap:var(--twoip-action-icon-gap);
  gap:var(--twoip-action-icon-gap);
}
body .btn.btn[data-twoip-button-icon]:not(.twoip-icon-action):not(.twoip-button--icon) > .twoip-icon {
  position:static; flex:0 0 18px; width:18px; height:18px;
  font-size:18px; line-height:18px; margin:0; color:currentColor;
}

/* Cabinet reference: equal action positions, each with its own centered control.
 * A Start/Stop action-set is one position. Hidden direct controls create no track.
 * Single actions and modal footers never opt into this variant. */
body .twoip-action-pair.twoip-action-pair {
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  align-items:center; justify-items:center; inline-size:100%;
  gap:var(--twoip-service-form-control-gap);
}
body .twoip-action-pair > :is(.twoip-current-grid,.twoip-service-action-set) {
  inline-size:100%; min-inline-size:0;
}
body .twoip-action-pair > [hidden] { display:none !important; }
body .twoip-action-pair > .twoip-service-action-set:not(:has(> .btn:not([hidden]):not([style*="display:none"]):not([style*="display: none"]))) { display:none; }
@media(max-width:991px) {
  body .twoip-action-pair.twoip-action-pair {
    grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:minmax(0,1fr);
  }
}

/* /templates/2ip/css/form-controls.css */
/* Canonical 2IP outlined controls. Feature CSS owns layout, never field skins. */
/* One-line metrics are shared by native inputs, selects and their icon slots. */
:root { --twoip-control-height: 44px; --twoip-control-line-height: 22px; --twoip-control-font-size: 16px; --twoip-control-padding-inline: 12px; --twoip-control-icon-size: 16px; }
@media (max-width: 480px) { :root { --twoip-control-height: 56px; } }
/* Editable state ink has one owner; locked controls keep their own contract. */
body :is(.twoip-form-group,.twoip-input-field:not(.twoip-form-group *)):has(:is(.form-control,.twoip-input-field > input):not(:is([type="hidden"],[type="file"],[type="checkbox"],[type="radio"]))) { --twoip-field-state: var(--twoip-outline); }
body :is(.twoip-form-group,.twoip-input-field:not(.twoip-form-group *)):not(:is(.twoip-invalid,.twoip-valid,.twoip-warning)):has(:is(.form-control,.twoip-input-field > input):not(:is([readonly],:disabled,.readonly,.disabled,[type="hidden"],[type="file"],[type="checkbox"],[type="radio"])):hover) { --twoip-field-state: var(--twoip-on-surface-variant); }
body :is(.twoip-form-group,.twoip-input-field:not(.twoip-form-group *)):not(:is(.twoip-invalid,.twoip-valid,.twoip-warning)):has(:is(.form-control,.twoip-input-field > input):not(:is([readonly],:disabled,.readonly,.disabled,[type="hidden"],[type="file"],[type="checkbox"],[type="radio"])):focus),
body .twoip-form-group.is-focused:not(:is(.twoip-invalid,.twoip-valid,.twoip-warning)):has(:is(.form-control,.twoip-input-field > input):not(:is([readonly],:disabled,.readonly,.disabled,[type="hidden"],[type="file"],[type="checkbox"],[type="radio"]))) { --twoip-field-state: var(--twoip-primary); }
body .twoip-form-group.twoip-valid:has(:is(.form-control,.twoip-input-field > input):not(:is([readonly],:disabled,.readonly,.disabled,[type="hidden"],[type="file"],[type="checkbox"],[type="radio"]))) { --twoip-field-state: var(--twoip-success); }
body .twoip-form-group.twoip-warning:has(:is(.form-control,.twoip-input-field > input):not(:is([readonly],:disabled,.readonly,.disabled,[type="hidden"],[type="file"],[type="checkbox"],[type="radio"]))) { --twoip-field-state: var(--twoip-warning); }
body :is(.twoip-form-group,.twoip-input-field:not(.twoip-form-group *)):has(:is(.form-control,.twoip-input-field > input):not(:is([readonly],:disabled,.readonly,.disabled,[type="hidden"],[type="file"],[type="checkbox"],[type="radio"]))):is(.twoip-invalid,:has(:is(.form-control,.twoip-input-field > input):is([aria-invalid="true"],.is-invalid))) { --twoip-field-state: var(--twoip-error); }
/* Outlined fields with persistent labels and contextual supporting text. */
body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) :is(.form-control,.form-select):not([type="hidden"]),
body :is(.t3-content,.modal,.twoip-city-popup) :where(input:not([type]),input[type="text"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[type="password"],input[type="search"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],textarea,select):not(:where(.TokenSearch input,.twoip-editor-tool)) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: 42px;
    height: auto;
    padding: 9px var(--twoip-control-padding-inline);
    padding-inline-end: calc(36px + var(--twoip-field-action-size, 0px));
    border: 1px var(--twoip-field-border-style, solid) var(--twoip-field-state, var(--twoip-outline));
    border-radius: var(--twoip-radius-small);
    background: var(--twoip-surface);
    background-image: none;
    color: var(--twoip-on-surface);
    opacity: 1;
    -webkit-text-fill-color: currentColor;
    box-shadow: none;
    font-size: var(--twoip-control-font-size);
    line-height: var(--twoip-control-line-height);
}
body :is(.t3-content,.modal,.twoip-form-group) textarea { min-height: 96px; resize: vertical; }

body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) :is(.form-control,.form-select):not([type="hidden"]):not(:where([readonly],.readonly)):focus,
body :is(.t3-content,.modal,.twoip-city-popup) :where(input:not([type]),input[type="text"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[type="password"],input[type="search"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],textarea,select):not(:where(.TokenSearch input,.twoip-editor-tool,[readonly],.readonly)):focus,
body .twoip-form-group.is-focused .form-control:not(:where([readonly],.readonly)),
body .twoip-form-group .twoip-file-control:focus-within {
  background-image: none; border: 2px var(--twoip-field-border-style, solid) var(--twoip-field-state, var(--twoip-field-focus, var(--twoip-primary))); padding: 8px calc(var(--twoip-control-padding-inline) - 1px); padding-inline-end: calc(35px + var(--twoip-field-action-size, 0px)); outline: none; box-shadow: none;
}
body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) :is(.form-control,input):is(input:not([type]),input[type="text"],input[type="input"],input[type="search"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[type="password"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"]):not(:where(.TokenSearch input,.twoip-editor-tool)) {
    height: var(--twoip-control-height);
    min-height: var(--twoip-control-height);
    font-family: inherit;
    font-size: var(--twoip-control-font-size);
    line-height: var(--twoip-control-line-height);
    padding-block: calc((var(--twoip-control-height) - var(--twoip-control-line-height)) / 2 - 1px);
}
body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) :is(.form-control,input):is(input:not([type]),input[type="text"],input[type="input"],input[type="search"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[type="password"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"]):not(:where(.TokenSearch input,.twoip-editor-tool,[readonly],.readonly)):focus {
    padding-block: calc((var(--twoip-control-height) - var(--twoip-control-line-height)) / 2 - 2px);
}
/* One-line floating notches: constrain only the visual label, keep its full accessible text. */
body .twoip-form-group.twoip-label-floating label.twoip-control-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;
}
/* The existing is-empty/is-focused controller owns the floating-label state. */
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control) { position: relative; }
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control):is(.is-empty,.is-focused,:not(.is-empty)) label.twoip-control-label {
  position: absolute; top: var(--twoip-floating-notch-inset, 0px); left: 12px !important; margin: 0; padding: 0 4px; z-index: 1;
  max-width: calc(100% - var(--twoip-field-label-inset, 32px)); background: var(--twoip-field-surface, var(--twoip-surface));
  font-family: "2ip"; font-size: 13px !important; line-height: 18px;
  color: var(--twoip-field-state, var(--twoip-primary)); transform: translateY(-50%);
  transition: transform .15s ease, font-size .15s ease, color .15s ease;
  pointer-events: none;
}
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control).is-empty:not(.is-focused) label.twoip-control-label {
  padding: 0; background: transparent; font-size: 16px !important;
  line-height: var(--twoip-control-line-height);
}
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control).is-focused label.twoip-control-label { color: var(--twoip-field-state, var(--twoip-field-focus, var(--twoip-primary))); }
body .twoip-form-group.twoip-label-floating:has(textarea.form-control).is-empty:not(.is-focused) label.twoip-control-label { top: calc(var(--twoip-floating-notch-inset, 0px) + 12px); transform: none; }
@media (max-width: 480px) {
  body .twoip-form-group.twoip-label-floating:has(textarea.form-control).is-empty:not(.is-focused) label.twoip-control-label { top: calc(var(--twoip-floating-notch-inset, 0px) + 6px); }
}
/* Empty one-line labels share the control's center, not the group/hint height. */
body .twoip-form-group.twoip-label-floating:has(input.form-control).is-empty:not(.is-focused) label.twoip-control-label {
  top: calc(var(--twoip-control-height) / 2); transform: translateY(-50%);
}
/* One integrated focus border replaces the generic external keyboard ring. */
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control) :is(input,textarea).form-control:not(:where([readonly],.readonly)):is(:focus,:focus-visible),
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control).is-focused :is(input,textarea).form-control:not(:where([readonly],.readonly)) {
  border-width: 2px; border-color: var(--twoip-field-state, var(--twoip-field-focus, var(--twoip-primary))); padding-inline: 11px; padding-inline-end: calc(35px + var(--twoip-field-action-size, 0px));
  outline: none; box-shadow: none;
}
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control):not(.twoip-invalid):not(.twoip-valid):not(.twoip-warning) :is(input,textarea).form-control:not([aria-invalid="true"]):not(:where(.twoip-invalid *,.twoip-valid *,.twoip-warning *,[readonly],.readonly)):hover:not(:focus) { border-color: var(--twoip-on-surface-variant); }
body .twoip-form-group:is(.twoip-label-static,.twoip-label-placeholder) label.twoip-control-label {
  position: absolute; top: -23px; margin: 0; font-size: 14px !important; line-height: 20px;
  color: var(--twoip-on-surface-variant); transform: none;
}
body .twoip-form-group .material-input { display: none; }
body .twoip-form-group .twoip-help-block {
  position: static;
  display: block;
  visibility: hidden;
  pointer-events: none;
  padding: var(--twoip-help-padding, 0);
  margin-block: 0;
  white-space: normal;
  overflow: visible;
  width: auto;
  font-size: 14px !important;
  line-height: 1.4;
}
/* The control/support relationship owns spacing, including decorated controls. */
body .twoip-form-group :is(.form-control,.twoip-input-field,.twoip-readonly-field,.input-group):has(~ .twoip-help-block) {
  margin-bottom: 0;
}
body .twoip-form-group :is(.twoip-input-field,.twoip-readonly-field,.input-group):has(~ .twoip-help-block) .form-control {
  margin-bottom: 0;
}
body .twoip-form-group :is(.form-control,.twoip-input-field,.twoip-readonly-field,.input-group) ~ .twoip-help-block {
  margin-top: var(--twoip-form-support-gap, 8px);
}
body .twoip-form-group .twoip-form-support {
  visibility: visible;
  pointer-events: auto;
}

/* Keep the supporting-text slot stable, but remove hidden hints from focus/AT. */
body .twoip-form-group:is(:focus-within,.twoip-invalid,.twoip-warning) .twoip-help-block,
body .twoip-form-group:has(.form-control:is([aria-invalid="true"],.is-invalid,:user-invalid)) .twoip-help-block,
body .twoip-form-group .twoip-help-block:is([role="alert"],[aria-live="assertive"],.invalid-feedback) { visibility: visible; pointer-events: auto; }
/* Validation uses the same single border, including keyboard focus. */
body .twoip-form-group.twoip-warning { --twoip-field-focus: var(--twoip-warning); }
body .twoip-form-group.twoip-warning .form-control { border-color: var(--twoip-warning); }
body .twoip-form-group.twoip-warning :is(.twoip-control-label,.twoip-help-block) { color: var(--twoip-warning); }
body .twoip-form-group.twoip-valid { --twoip-field-focus: var(--twoip-success); }
body .twoip-form-group.twoip-valid .form-control { border-color: var(--twoip-success); background-image: none; }
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control).twoip-valid label.twoip-control-label,
body .twoip-form-group.twoip-valid label.twoip-control-label { color: var(--twoip-success); }
body .twoip-form-group:is(.twoip-invalid,:has(.form-control:is([aria-invalid="true"],.is-invalid))) { --twoip-field-focus: var(--twoip-error); }
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control).twoip-invalid :is(input,textarea).form-control,
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control) :is(input,textarea).form-control[aria-invalid="true"],
body .twoip-form-group.twoip-invalid .form-control,
body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) :is(.form-control,.form-select)[aria-invalid="true"], body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) :is(.form-control,.form-select).is-invalid { --twoip-field-focus: var(--twoip-error); border-color: var(--twoip-error); background-image: none; }
body .twoip-form-group.twoip-label-floating:has(:is(input,textarea).form-control).twoip-invalid label.twoip-control-label,
body .twoip-form-group.twoip-invalid :is(.twoip-control-label,.twoip-help-block),
body .twoip-invalid label, body .invalid-feedback { color: var(--twoip-error); }
/* State changes only the border pattern; native behavior remains untouched. */
body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) :is(.form-control,.form-select):is([readonly],:disabled,.readonly,.disabled),
body :is(.t3-content,.modal) :is(input,textarea,select):is([readonly],:disabled,.readonly,.disabled) { --twoip-field-border-style: dotted; }
body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) :is(.form-control,.form-select)[readonly],
body :is(.t3-content,.modal) :is(input,textarea)[readonly] { user-select: text; outline: none; outline-offset: 3px; }
/* Locked fields share editable focus ink, while retaining their dotted 1px
   border, native selection and stationary caption/lock geometry. */
body :is(.twoip-form-group,.twoip-input-field:not(.twoip-form-group *)):has(:is(input,textarea)[readonly]:not(:disabled):focus) { --twoip-field-state: var(--twoip-primary); }
body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) :is(input,textarea)[readonly]:not(:disabled):focus {
  border-color: var(--twoip-primary);
}
body :is(.twoip-readonly-field,.twoip-input-field) { display: block; position: relative; min-width: 0; }
body .input-group > :is(.twoip-readonly-field,.twoip-input-field) { flex: 1 1 auto; width: 1%; }
body :is(.twoip-readonly-field,.twoip-input-field) > :is(.twoip-readonly-lock,.twoip-input-icon) {
  position: absolute; inset-inline-end: var(--twoip-control-padding-inline); top: 50%; transform: translateY(-50%);
  width: var(--twoip-control-icon-size); font-size: var(--twoip-control-icon-size); line-height: 1; margin: 0; color: var(--twoip-field-state, var(--twoip-primary));
  pointer-events: none; cursor: default;
}
body .twoip-readonly-field:not(:has(:is(input,textarea):is([readonly],:disabled))) > .twoip-readonly-lock { display: none; }
body .form-control::placeholder,
body :is(.t3-content,.modal,.twoip-city-popup) :where(input:not([type]),input[type="text"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[type="password"],input[type="search"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],textarea,select):not(:where(.TokenSearch input,.twoip-editor-tool))::placeholder {
    font: inherit;
    color: var(--twoip-on-surface-variant) !important;
    opacity: 1 !important;
}

/* Floating labels supply the caption in every state; retain native placeholder metadata. */
body .twoip-form-group.twoip-label-floating:has(label.twoip-control-label:not([hidden],.visually-hidden,.element-invisible)) :is(input,textarea).form-control::placeholder {
  opacity: 0 !important;
}

/* Native fields retain their functional width, rows, autocomplete and select mechanics. */
body :is(.t3-content,.modal,.twoip-city-popup) :where(input:not([type]),input[type="text"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[type="password"],input[type="search"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],textarea,select):not(:where(.TokenSearch input,.twoip-editor-tool)):not([aria-invalid="true"]):not(:where(.twoip-invalid *,.twoip-valid *,.twoip-warning *,[readonly],.readonly)):hover:not(:focus) {
    border-color: var(--twoip-on-surface-variant);
}
body .twoip-form-group label.twoip-control-label { color: var(--twoip-field-state, var(--twoip-on-surface-variant)); }
/* Bootstrap input-group trims corner radii with high-specificity child selectors. */
body .twoip-form-group .input-group .form-control { border-radius: var(--twoip-radius-small) !important; }
body .twoip-form-group.twoip-label-floating:not(.port-field):has(:is(input,textarea).form-control:autofill) label.twoip-control-label { top: 0; padding: 0 4px; background: var(--twoip-field-surface, var(--twoip-surface)); font-size: 13px !important; line-height: 18px; transform: translateY(-50%); }
/* One trailing slot for canonical form listbox triggers. */
:root {
  --twoip-select-trailing-inset: var(--twoip-control-padding-inline);
  --twoip-select-icon-size: var(--twoip-control-icon-size);
  --twoip-select-icon-gap: 12px;
}
body :is(.t3-content,.modal) select:not([multiple]):not([hidden]),
body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) .form-control.twoip-form-select-trigger {
  height: var(--twoip-control-height);
  min-height: var(--twoip-control-height);
  font-family: inherit;
  font-size: var(--twoip-control-font-size);
  line-height: var(--twoip-control-line-height);
  padding-block: calc((var(--twoip-control-height) - var(--twoip-control-line-height)) / 2 - 1px);
  padding-inline-start: var(--twoip-control-padding-inline);
  padding-inline-end: var(--twoip-select-trailing-inset);
  transition: border-color .15s ease;
}
body :is(.t3-content,.modal) select:not([multiple]):not([hidden]):focus,
body :is(.twoip-form-group,.t3-content,.modal,.twoip-city-popup) .form-control.twoip-form-select-trigger:focus {
  padding-block: calc((var(--twoip-control-height) - var(--twoip-control-line-height)) / 2 - 2px);
  padding-inline-start: calc(var(--twoip-control-padding-inline) - 1px);
  padding-inline-end: var(--twoip-select-trailing-inset);
}
body :is(.t3-content,.modal) select:not([data-twoip-select]) {
  appearance: none;
}
body :is(.twoip-form-select-trigger > .twoip-disclosure-arrow,.twoip-select-control > .twoip-disclosure-arrow) {
  display: grid;
  place-items: center;
  width: var(--twoip-select-icon-size);
  height: var(--twoip-select-icon-size);
  font-size: var(--twoip-select-icon-size);
  line-height: 1;
  flex: 0 0 var(--twoip-select-icon-size);
}
body .twoip-form-select-trigger {
  align-items: center;
  gap: var(--twoip-select-icon-gap);
}
/* Protected dropdown fields share the trailing caret, not header-toggle centering. */
body .twoip-selector-toggle.twoip-select-control { justify-content: space-between; }
body .twoip-form-select-trigger .twoip-disclosure-arrow { color: var(--twoip-field-state, var(--twoip-outline)); }
body .twoip-form-select-trigger:focus .twoip-disclosure-arrow { color: var(--twoip-field-state, var(--twoip-primary)); }
body .twoip-form-select-trigger[aria-invalid="true"] .twoip-disclosure-arrow { color: var(--twoip-error); }
/* Dependent selects keep their geometry; only the in-control loading glyph changes. */
body :is(.twoip-form-select-trigger,.twoip-select-control)[aria-busy=true] { position: relative; }
body :is(.twoip-form-select-trigger,.twoip-select-control)[aria-busy=true] > .twoip-disclosure-arrow { visibility: hidden; }
body .twoip-select-spinner { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; inline-size: var(--twoip-select-icon-size); block-size: var(--twoip-select-icon-size); pointer-events: none; }
body .twoip-select-spinner[hidden] { display: none; }
body .twoip-select-spinner > .twoip-icon { position: static; margin: 0; font-size: var(--twoip-select-icon-size); line-height: 1; color: var(--twoip-primary); }
body .twoip-form-group.twoip-label-floating:has(select:not([multiple])) { position: relative; }
body .twoip-form-group.twoip-label-floating:has(select:not([multiple])) > label.twoip-control-label {
  position: absolute; top: 0; inset-inline-start: 12px; transform: translateY(-50%); margin: 0; padding: 0 4px;
  max-width: calc(100% - 48px); font-size: 13px; line-height: 18px; background: var(--twoip-surface);
  color: var(--twoip-field-state, var(--twoip-outline)); z-index: 1;
}
body :is(.t3-content,.modal) label.error { color: var(--twoip-error); }

/* A leading addon and floating field share one row; the label anchors to the field column. */
body .twoip-form-group.twoip-label-floating .input-group:has(> .input-group-text):has(> label.twoip-control-label) { display: grid; grid-template-columns: auto minmax(0, 1fr); position: relative; }
body .twoip-form-group.twoip-label-floating .input-group:has(> .input-group-text):has(> label.twoip-control-label) > .input-group-text { grid-column: 1; grid-row: 1; }
body .twoip-form-group.twoip-label-floating .input-group:has(> .input-group-text):has(> label.twoip-control-label) > :is(.form-control,.twoip-readonly-field,.twoip-input-field) { grid-column: 2; grid-row: 1; width: 100%; }
body .twoip-form-group.twoip-label-floating .input-group:has(> .input-group-text):has(> label.twoip-control-label) > label.twoip-control-label { grid-column: 2; grid-row: 1; }

/* One trailing semantic slot; native control skin and height remain authoritative. */
body .twoip-input-field { margin-bottom: 7px; }
body :is(.twoip-input-field,.twoip-readonly-field) > input.form-control, body :is(.twoip-input-field,.twoip-readonly-field) > input { display: block; width: 100%; margin-bottom: 0; }
body .twoip-input-field > .twoip-input-icon { height: var(--twoip-control-icon-size); display: grid; place-items: center; }
/* A 44px action plus its external focus ring fits inside a 56px field.
   The semantic trailing icon remains in the canonical 16px slot. */
body .twoip-form-group:has(.twoip-input-with-action),
body .twoip-input-field.twoip-input-with-action {
  --twoip-control-height: 56px;
  --twoip-field-action-size: 48px;
}
body .twoip-input-field > .input-password-toggle {
  position: absolute;
  inset-inline-end: calc(var(--twoip-control-padding-inline) + var(--twoip-control-icon-size) + 8px);
  inset-block: 0;
  margin-block: auto;
}
body .twoip-form-group:has(.twoip-input-field) { --twoip-field-label-inset: 48px; }
body .twoip-form-group:has(.twoip-input-with-action) { --twoip-field-label-inset: 92px; }
/* Native Joomla modify controls stay siblings; the icon anchors to the input row. */
body .twoip-input-field:has(> .input-password-modify) { display: grid; grid-template-columns: minmax(0, 1fr); }
body .twoip-input-field > input:has(~ .input-password-modify) { grid-area: 1 / 1; }
body .twoip-input-field > .input-password-modify { grid-row: 2; justify-self: start; }
body .twoip-input-field:has(> .input-password-modify) > .twoip-input-icon { grid-area: 1 / 1 / 2 / 2; }

/* Shared state transitions never affect field metrics or native value ink. */
body .twoip-form-group .form-control:not(:is([readonly],:disabled,.readonly,.disabled)) { transition: border-color .15s ease; }
body .twoip-form-group:has(.form-control:not(:is([readonly],:disabled,.readonly,.disabled))) label.twoip-control-label { transition: transform .15s ease, font-size .15s ease, color .15s ease; }
body .twoip-input-field:has(> input:not(:is([readonly],:disabled,.readonly,.disabled))) > .twoip-input-icon { transition: color .15s ease; }
body .twoip-form-group:has(:is(.form-control,.twoip-input-field > input)) .input-group-text .twoip-icon { color: var(--twoip-field-state, var(--twoip-primary)); transition: color .15s ease; }

/* Search uses the canonical field without a legacy leading-addon column. */
body .twoip-search-control { position: relative; min-width: 0; width: 100%; }
/* One clear action for native, provider and DataTables search fields.
   Separate the compact state layer from the accessible native hit area. */
body .twoip-search-with-clear {
  --twoip-search-clear-size: var(--twoip-icon-action-size);
  --twoip-search-clear-visual-size: 32px;
  --twoip-search-clear-gap: 10px;
  --twoip-search-clear-inset: calc(var(--twoip-control-padding-inline) + var(--twoip-control-icon-size) + var(--twoip-search-clear-gap) - (var(--twoip-search-clear-size) - var(--twoip-search-clear-visual-size)) / 2);
}
body .twoip-search-with-clear > input { padding-inline-end: calc(var(--twoip-search-clear-inset) + var(--twoip-search-clear-size) + var(--twoip-control-padding-inline)) !important; }
body .twoip-search-with-clear > input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
body .twoip-search-clear.twoip-icon-action {
  --twoip-icon-action-container: transparent;
  position: absolute;
  inset-inline-end: var(--twoip-search-clear-inset);
  translate: 0 -50%;
}
body .twoip-search-with-clear > :is(.twoip-search-clear,.twoip-input-icon) { top: calc(var(--twoip-control-height) / 2); }
body .twoip-search-clear[hidden] { display: none; }
body .twoip-search-clear.twoip-icon-action > .twoip-icon {
  width: var(--twoip-search-clear-visual-size);
  height: var(--twoip-search-clear-visual-size);
  border-radius: var(--twoip-radius-full);
  font-size: var(--twoip-control-icon-size);
}
body .twoip-search-clear:is(:hover,:focus-visible) > .twoip-icon { background: color-mix(in srgb, var(--twoip-error) 8%, transparent); }
body .twoip-search-clear:active > .twoip-icon { background: color-mix(in srgb, var(--twoip-error) 12%, transparent); }
body .twoip-search-clear.twoip-icon-action:focus-visible { outline-offset: calc((var(--twoip-search-clear-visual-size) - var(--twoip-search-clear-size)) / 2 - 2px); }
body .twoip-search-with-clear > .twoip-search-clear.twoip-icon-action:not(:disabled):not(.disabled):not([aria-disabled="true"]):active { box-shadow: none; }

/* Multiple token entry is a chip-field variant, not a single-value listbox. */
body .Tokenize.Tokenize ul.TokensContainer.form-control { box-sizing: border-box; min-height: 44px; padding: 9px 12px; border: 1px solid var(--twoip-outline); border-radius: var(--twoip-radius-small); background: var(--twoip-surface); color: var(--twoip-on-surface); }
body .Tokenize.Tokenize:focus-within ul.TokensContainer.form-control { border-color: var(--twoip-primary); }
body .Tokenize.Tokenize.Disabled ul.TokensContainer.form-control { border: 1px dotted var(--twoip-outline); background: var(--twoip-surface); }
body .Tokenize ul.TokensContainer li.Token { color: var(--twoip-on-surface); background: var(--twoip-surface-container); border-color: var(--twoip-outline-variant); border-radius: var(--twoip-radius-small); }
body .Tokenize ul.Dropdown { max-height: min(60vh, 360px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--twoip-outline-variant); border-radius: var(--twoip-radius-medium); background: var(--twoip-surface); color: var(--twoip-on-surface); box-shadow: var(--twoip-elevation-2); }
body .Tokenize ul.Dropdown li { min-height: 44px; padding: 10px 12px; color: var(--twoip-on-surface); }
body .Tokenize ul.Dropdown li.Hover { background: var(--twoip-primary-container); color: var(--twoip-on-primary-container); }
@media (max-width: 480px) { body .Tokenize.Tokenize ul.TokensContainer.form-control { min-height: 56px; } }

/* External grid labels have their own row contract. Floating legends, radio/checkbox
   labels and supporting text do not opt in. Label height tracks the control token. */
body .twoip-external-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
body .twoip-external-form-row > .twoip-external-label {
  margin-block: 0;
  padding-block: 0;
}
@media (min-width: 768px) {
  body .twoip-external-form-row > .twoip-external-label:is([class*="col-md-"]) {
    display: flex;
    align-items: center;
    min-height: var(--twoip-control-height);
  }
}
@media (min-width: 992px) {
  body .twoip-external-form-row > .twoip-external-label:is([class*="col-lg-"]) {
    display: flex;
    align-items: center;
    min-height: var(--twoip-control-height);
  }
}

/* Grid labels/controls stack before their own Bootstrap column breakpoint.
   Legacy float wrappers otherwise shrink-wrap columns on narrow screens. */
@media (max-width: 767.98px) {
  body .twoip-external-form-row:has(> .twoip-external-label[class*="col-md-"]) > .twoip-current-grid {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  body .twoip-external-form-row:has(> .twoip-external-label[class*="col-lg-"]) > .twoip-current-grid {
    width: 100%;
  }
}

/* Browser popup selects expose no dependable open state: one static FA7 down slot. */
body .twoip-native-select { --twoip-select-border-width: 1px; display: inline-grid; grid-template-columns: minmax(0, 1fr); align-items: center; max-width: 100%; }
body :is(.t3-content,.modal) .twoip-native-select > select:not([multiple]):not([hidden]) { grid-area: 1 / 1; width: 100%; margin: 0; appearance: none; background-image: none; padding-inline-end: calc(var(--twoip-select-trailing-inset) + var(--twoip-select-icon-size) + var(--twoip-select-icon-gap)); }
body .twoip-native-select > .twoip-chevron { --twoip-chevron-size: var(--twoip-select-icon-size); grid-area: 1 / 1; justify-self: end; margin-inline-end: calc(var(--twoip-select-trailing-inset) + var(--twoip-select-border-width)); pointer-events: none; }

body .twoip-native-select:has(> select:focus) { --twoip-select-border-width: 2px; }

/* Textarea notches reserve their own half-label inset inside the field group. */
body .twoip-form-group.twoip-label-floating:has(textarea.form-control) { --twoip-floating-notch-inset:9px;padding-block-start:var(--twoip-floating-notch-inset); }
body .twoip-form-group.twoip-label-floating:has(textarea.form-control) label.twoip-control-label { top:var(--twoip-floating-notch-inset); }
body .twoip-readonly-field > textarea.form-control { padding-inline-end:calc(var(--twoip-control-padding-inline) + var(--twoip-control-icon-size) + 8px); }

/* Native file controls reuse .form-control skin; only layout and hidden picker differ. */
body .twoip-form-group .twoip-file-control.form-control { position:relative; display:flex; align-items:center; gap:var(--twoip-service-option-row-gap); height:var(--twoip-control-height); min-height:var(--twoip-control-height); padding:0 var(--twoip-control-padding-inline); cursor:pointer; }
body .twoip-form-group .twoip-file-control:focus-within { --twoip-field-state:var(--twoip-primary); padding-inline:calc(var(--twoip-control-padding-inline) - 1px); }
body .twoip-form-group .twoip-file-control:is(.is-invalid,[aria-invalid="true"]):focus-within { --twoip-field-state:var(--twoip-error); }
body .twoip-form-group .twoip-file-control:has(input:is(:disabled,[readonly])),body .twoip-form-group .twoip-file-control:is([aria-disabled="true"],[aria-readonly="true"]) { --twoip-field-state:var(--twoip-outline); border-style:dotted; cursor:default; }
body .twoip-file-control input[type=file] { position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px; border:0; overflow:hidden; clip-path:inset(50%); opacity:0; }
.twoip-file-control [data-file-name] { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.twoip-file-control .twoip-icon { position:static; flex:none; margin:0; font-size:var(--twoip-control-icon-size); line-height:1; color:var(--twoip-primary); }
body .twoip-form-group .twoip-file-control + .twoip-help-block { visibility:visible; pointer-events:auto; margin-block-start:4px; color:var(--twoip-on-surface-variant); display:flex; align-items:center; min-block-size:var(--twoip-control-height); padding-block:0; box-sizing:border-box; }
.twoip-logo-preview { display:inline-block; width:250px; height:75px; max-width:100%; object-fit:contain; }
/* Hints keep their natural wrapped height in both focus states; no artificial spacer. */
body .twoip-form-group.twoip-search-field { margin-block:var(--twoip-service-form-section-gap) 0; padding:0; min-block-size:0; }
body .twoip-form-group.twoip-search-field .form-control { margin-block:0; }
body .twoip-form-group.twoip-field--contextual-support .twoip-help-block { display:block; visibility:hidden; pointer-events:none; padding:0; min-block-size:0; margin:var(--twoip-service-option-row-gap) 0 0; font-size:var(--twoip-type-label) !important; }
body .twoip-form-group.twoip-field--contextual-support:is(:focus-within,.twoip-invalid,.twoip-warning) .twoip-help-block,
body .twoip-form-group.twoip-field--contextual-support:has(.form-control:is([aria-invalid="true"],.is-invalid,:user-invalid)) .twoip-help-block,
body .twoip-form-group.twoip-field--contextual-support .twoip-help-block:is([role="alert"],[aria-live="assertive"],.invalid-feedback) { visibility:visible; pointer-events:auto; }
body .twoip-search-field + :is(.twoip-scope-switch,[data-twoip-single-panel-tabs]) { margin-block:var(--twoip-service-form-section-gap) 0; }

/* /libs/presentation/city-input.css */
/* Searchable native-value chooser reuses the shared selector/menu family. */
.twoip-city-choice {position:relative;display:inline-block;vertical-align:middle;max-width:100%}
.twoip-city-popup {box-sizing:border-box;list-style:none;border:1px solid var(--twoip-outline-variant);position:fixed;z-index:1081;overscroll-behavior:contain}
.twoip-city-popup[hidden],.twoip-city-option[hidden],.twoip-city-empty[hidden] {display:none!important}
.twoip-city-popup--searchable {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.twoip-city-results {
    min-height: 0;
    overflow-y: auto;
}
.twoip-city-popup .twoip-city-search {
    box-sizing: border-box;
    flex: none;
    width: calc(100% - 16px);
    margin: 8px;
}
.twoip-city-option {width:100%;border:0;font:inherit;text-align:start;overflow-wrap:anywhere}
.twoip-city-option:disabled {opacity:.5;cursor:default}
.twoip-city-empty {padding:8px 12px;color:var(--twoip-on-surface-variant)}

.twoip-form-selector .twoip-city-popup { margin: 0; }
.twoip-city-popup[role="listbox"] { display: block; }

/* Floating-field hydration adds a wrapper; that wrapper owns menu insets. */
body .twoip-city-popup > :is(.twoip-form-group,.twoip-input-field) {
    width: auto;
    min-width: 0;
    align-self: stretch;
    margin: var(--twoip-service-option-row-gap);
    padding: 0;
}
body .twoip-city-popup :is(.twoip-form-group,.twoip-input-field) .twoip-city-search {
    width: 100%;
    margin: 0;
}

/* /libs/presentation/header-ad-layout.css */
/* Header advertisement shares the service/sidebar boundary; chrome stays intrinsic. */
body .t3-header .twoip-header-row--with-ad {
  --twoip-header-column-gap: 16px;
  --twoip-header-inline-padding: 12px;
}
body .t3-header .header-ad-slot { max-inline-size: none; }
body .t3-header .header-ad-column > .row { margin-inline: 0; }
body .t3-header .header-ad-column .top-banner { padding-inline: 0; }
@media (min-width: 1100px) {
  body .t3-header .twoip-header-row--with-ad {
    grid-template-columns: calc(var(--twoip-sidebar-width) + var(--twoip-shell-gap) + var(--twoip-grid-gutter) / 2 - var(--twoip-header-inline-padding) - var(--twoip-header-column-gap)) minmax(0, 1fr) calc(var(--twoip-header-utilities-width) + var(--bs-gutter-x));
  }
}
@media (min-width: 1100px) and (max-width: 1199px) {
  body .t3-header .twoip-header-row--with-ad { --twoip-header-inline-padding: 0px; }
}
@media (max-width: 1099px) {
  body .t3-header .header-ad-column { padding-inline: calc(var(--twoip-grid-gutter) / 2); max-inline-size: none; }
}
/* Native creative dimensions remain untouched; an incompatible delivery is hidden whole. */
body .t3-header .twoip-header-ad-creative :is(iframe,img,video) {
  max-inline-size: none !important; max-block-size: none !important;
}
body .t3-header .twoip-header-ad-creative:not([data-header-ad-fit="fit"]) { visibility: hidden; }

/* /libs/presentation/sidebar-menu-order.css */
/* Normal-flow section spacing uses the existing 16px navigation rhythm. */
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav > .twoip-sidebar-utility-group:has(+ .twoip-sidebar-promo-item) {
    margin-block-end: 0;
}
body :is(#t3-mainnav,#t3-off-canvas) .sidebar-nav > .twoip-sidebar-promo-item {
    --twoip-sidebar-promo-gap: calc(2 * var(--twoip-navigation-desktop-gap));
    margin-block-start: var(--twoip-sidebar-promo-gap);
}

/* Keep the homepage All services alignment as the shared desktop sidebar placement.
 * Locales without Facebook need one utility row of additional normal-flow space. */
@media (min-width: 1100px) {
    body #t3-mainnav .sidebar-nav > .twoip-sidebar-promo-item {
        --twoip-sidebar-promo-gap: calc(var(--twoip-space-2, 8px) + var(--twoip-sidebar-optional-utility-space, 0px));
    }
    body #t3-mainnav:not(:has(.menu_facebook)) .sidebar-nav > .twoip-sidebar-promo-item {
        --twoip-sidebar-optional-utility-space: calc(var(--twoip-navigation-group-height) + var(--twoip-sidebar-utility-gap));
    }
}

/* /media/plg_system_webauthn/css/button.min.css */
button[class*=plg_system_webauthn_login_button]{padding:.4rem}
/* /libs/presentation/ip-address.css */
/* Shared hero captions retain the original IPv4 typography. The family hooks
   give this owner precedence over legacy percentage-based caption rules. */
body .ipblock .showip_mod .twoip-addresses .twoip-address-label:is(.iptitle, .ipv6title) {
  font-size: var(--twoip-address-label-size);
  font-weight: 400;
  font-family: "2ip";
  font-variant-numeric: normal;
  line-height: 1.45;
  letter-spacing: normal;
}

/* Family slots derive from existing type/copy metrics, not a blanket height. A known
   transport address paints immediately; discovery only fills the other slot. */
body .ipblock .showip_mod .twoip-addresses {
  --twoip-address-label-size: 18px;
  --twoip-address-primary-slot: calc(var(--twoip-address-label-size) * 1.45 + max(var(--twoip-hero-copy-size), var(--twoip-hero-ipv4-size) * 1.25));
  --twoip-address-secondary-slot: calc(var(--twoip-address-label-size) * 1.45 + max(var(--twoip-hero-copy-size), var(--twoip-hero-ipv6-size) * 1.4 * var(--twoip-hero-ipv6-lines)));
  --twoip-address-family-gap: 12px;
  --twoip-address-stage-height: calc(var(--twoip-address-primary-slot) + var(--twoip-address-secondary-slot) + var(--twoip-address-family-gap));
  block-size: var(--twoip-address-primary-slot);
  display: grid;
  grid-template-rows: var(--twoip-address-primary-slot);
}
body .ipblock .showip_mod .twoip-addresses > .ip {
  display: grid;
  grid-template-columns: minmax(0, max-content) var(--twoip-hero-copy-size);
  justify-content: center;
  grid-template-rows: calc(var(--twoip-address-label-size) * 1.45) minmax(0, 1fr);
  column-gap: 4px;
  align-items: center;
  align-self: stretch;
  block-size: 100%;
}
body .ipblock .showip_mod .twoip-addresses > [data-address-row="ipv4"] {
  grid-row: 1;
}
body .ipblock .showip_mod .twoip-addresses > [data-address-row="ipv6"] {
  grid-row: 1;
}
body .ipblock .showip_mod .twoip-addresses .twoip-address-label {
  grid-area: 1 / 1 / 2 / 3;
  block-size: calc(var(--twoip-address-label-size) * 1.45);
  margin-block: 0;
}
body .ipblock .showip_mod .twoip-addresses [data-address-unknown] {
  grid-row: 1 / -1;
  align-self: center;
}
body .ipblock .showip_mod .twoip-addresses[data-address-phase="pending"] [data-address-unknown] {
  visibility: hidden;
}

body .ipblock .showip_mod .twoip-addresses > .ip > .twoip-ip-address {
  grid-area: 2 / 1;
  max-width: 100%;
  align-content: center;
}
body .ipblock .showip_mod .twoip-addresses > [data-address-row="ipv4"] > .twoip-ip-address {
  block-size: calc(var(--twoip-hero-ipv4-size) * 1.25);
}
body .ipblock .showip_mod .twoip-addresses > [data-address-row="ipv6"] > .twoip-ip-address {
  block-size: calc(var(--twoip-hero-ipv6-size) * 1.4 * var(--twoip-hero-ipv6-lines));
}
body .ipblock .showip_mod .twoip-addresses > .ip > button {
  grid-area: 2 / 2;
  margin-inline-start: 0;
}

/* The fixed ASCII CLI caption must not resize its right-anchored control while
   the parser inserts the label or the embedded condensed face decodes. */
body .ipblock .showip_mod .cli button {
  --twoip-hero-cli-icon-size: 20px;
  --twoip-hero-cli-caption-size: 24px;
  display: grid;
  grid-template-columns: var(--twoip-hero-cli-icon-size) var(--twoip-hero-cli-caption-size);
  inline-size: calc(var(--twoip-hero-cli-icon-size) + var(--twoip-hero-cli-caption-size) + 6px + 16px);
}

/* Reserve only the visible families. An actual second result may expand the
   card once; a failed/slow probe never creates or removes an empty row. */
body .ipblock .showip_mod .twoip-addresses[data-stack="ipv6"] {
  block-size: var(--twoip-address-secondary-slot);
  grid-template-rows: var(--twoip-address-secondary-slot);
}
body .ipblock .showip_mod .twoip-addresses[data-stack="dual"] {
  block-size: var(--twoip-address-stage-height);
  grid-template-rows: var(--twoip-address-primary-slot) var(--twoip-address-secondary-slot);
  row-gap: var(--twoip-address-family-gap);
}
body .ipblock .showip_mod .twoip-addresses[data-stack="dual"] > [data-address-row="ipv6"] {
  grid-row: 2;
}

/* /libs/presentation/async-info.css */
/* Shared opt-in skeleton. Callers reserve their canonical value slot before first paint. */
.twoip-skeleton {
  display: block; inline-size: var(--twoip-skeleton-width, 70%); max-inline-size: 100%; block-size: 1lh;
  border-radius: var(--twoip-radius-small); background: var(--twoip-surface-container-high);
  animation: twoip-skeleton-pulse 1.6s ease-in-out infinite;
}
[data-twoip-async-state="loading"] .twoip-info-icon { opacity: .45; }
[data-twoip-async-state]:is([data-twoip-async-state="ready"],[data-twoip-async-state="error"]) .twoip-async-content {
  animation: twoip-info-ready 150ms ease-out;
}
@keyframes twoip-skeleton-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes twoip-info-ready { from { opacity: 0; } to { opacity: 1; } }
/* The reserve retains established geometry; compact text owns clipping/tooltip.
   Real bottom padding keeps intrinsic inline-link borders inside the clip. */
body .ipblock .showip_mod [data-twoip-async-state] .twoip-async-content {
  display: block; box-sizing: border-box; padding-block-end: 2px; min-block-size: calc(1lh + 2px); max-block-size: var(--twoip-info-value-block-size);
}
body .ipblock .showip_mod [data-twoip-async-state] .twoip-async-content[hidden] { display: none; }
body .ipblock .showip_mod :is(.info1,.s-info1) { --twoip-skeleton-width: 80%; }
body .ipblock .showip_mod :is(.info4,.s-info4) { --twoip-skeleton-width: 85%; }
body .ipblock .showip_mod .info6 { --twoip-skeleton-width: 55%; }
@media (prefers-reduced-motion: reduce) {
  .twoip-skeleton, [data-twoip-async-state]:is([data-twoip-async-state="ready"],[data-twoip-async-state="error"]) .twoip-async-content { animation: none; }
}

body .ipblock .showip_mod .twoip-skeleton {
  visibility: hidden;
  animation: none;
}
body .ipblock .showip_mod [data-twoip-async-state] .twoip-async-content {
  animation: none;
}

/* /media/vendor/joomla-custom-elements/css/joomla-alert.min.css */
joomla-alert{--jui-alert-min-width:250px;--jui-alert-padding:.5rem 1.25rem;--jui-alert-margin:0 0 1rem 0;--jui-alert-border:1px solid transparent;--jui-alert-border-radius:.25rem;--jui-alert-animation-duration:.5s;--jui-alert-animation-timing-function:ease-in-out;--jui-alert-button-color-dark:#000;--jui-alert-button-color-light:#fff;--jui-alert-success-color:#234423;--jui-alert-success-background-color:#d9e6d9;--jui-alert-success-border-color:#cadcca;--jui-alert-success-link-color:#122212;--jui-alert-info-color:#0c5460;--jui-alert-info-background-color:#d1ecf1;--jui-alert-info-border-color:#bee5eb;--jui-alert-info-link-color:#062c33;--jui-alert-warning-color:#7d5a29;--jui-alert-warning-background-color:#fcefdc;--jui-alert-warning-border-color:#fbe8cd;--jui-alert-warning-link-color:#573e1c;--jui-alert-danger-color:#712b29;--jui-alert-danger-background-color:#f7dddc;--jui-alert-danger-border-color:#f4cfce;--jui-alert-danger-link-color:#4c1d1b;animation-duration:var(--jui-alert-animation-duration,.5s);animation-timing-function:var(--jui-alert-animation-timing-function,ease-in-out);border:var(--jui-alert-border,1px solid transparent);border-radius:var(--jui-alert-border-radius,.25rem);display:block;margin:var(--jui-alert-margin,0 0 1rem 0);min-width:var(--jui-alert-min-width,250px);padding:var(--jui-alert-padding,.5rem 1.25rem)}joomla-alert .joomla-alert--close{background:transparent;border:0;color:var(--jui-alert-button-color-dark,#000);float:right;font-size:1.5rem;font-weight:700;line-height:1;opacity:.5;padding:.2rem 1rem;position:relative;right:-1.25rem;text-shadow:0 1px 0 var(--jui-alert-button-color-light,#fff);top:-.5rem}joomla-alert .joomla-alert--close:focus,joomla-alert .joomla-alert--close:hover{color:var(--jui-alert-button-color-dark,#000);cursor:pointer;opacity:.75;text-decoration:none}joomla-alert[type=success]{background-color:var(--jui-alert-success-background-color,#d9e6d9);border-color:var(--jui-alert-success-border-color,#cadcca);color:var(--jui-alert-success-color,#234423)}joomla-alert[type=success] hr{border-top-color:var(--jui-alert-success-border-color,#cadcca)}joomla-alert[type=success] .alert-link{color:var(--jui-alert-success-link-color,#122212)}joomla-alert[type=info]{background-color:var(--jui-alert-info-background-color,#d1ecf1);border-color:var(--jui-alert-info-border-color,#bee5eb);color:var(--jui-alert-info-color,#0c5460)}joomla-alert[type=info] hr{border-top-color:var(--jui-alert-info-border-color,#bee5eb)}joomla-alert[type=info] .alert-link{color:var(--jui-alert-info-link-color,#062c33)}joomla-alert[type=warning]{background-color:var(--jui-alert-warning-background-color,#fcefdc);border-color:var(--jui-alert-warning-border-color,#fbe8cd);color:var(--jui-alert-warning-color,#7d5a29)}joomla-alert[type=warning] hr{border-top-color:var(--jui-alert-warning-border-color,#fbe8cd)}joomla-alert[type=warning] .alert-link{color:var(--jui-alert-warning-link-color,#573e1c)}joomla-alert[type=danger]{background-color:var(--jui-alert-danger-background-color,#f7dddc);border-color:var(--jui-alert-danger-border-color,#f4cfce);color:var(--jui-alert-danger-color,#712b29)}joomla-alert[type=danger] hr{border-top-color:var(--jui-alert-danger-border-color,#f4cfce)}joomla-alert[type=danger] .alert-link{color:var(--jui-alert-danger-link-color,#4c1d1b)}html[dir=rtl] joomla-alert .joomla-alert--close,html[dir=rtl] joomla-alert .joomla-alert-button--close{float:left;left:-1.25rem;right:auto}@keyframes joomla-alert-fade-in{0%{opacity:0}}@keyframes joomla-alert-fade-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){joomla-alert{animation-duration:1ms!important}}