@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("./font/Roboto-Regular.ttf"); }

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url("./font/Roboto-Italic.ttf"); }

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url("./font/Roboto-SemiBold.ttf"); }

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url("./font/Roboto-SemiBoldItalic.ttf"); }

body, * {
  font-family: "Roboto"; }

html, body {
  margin: 0;
  padding: 0;
  background-color: #efefef;
  z-index: -1;
  position: relative;
  color: #161616; }

* {
  box-sizing: border-box; }

.container {
  max-width: 900px;
  margin: auto;
  padding: 0 15px; }

.grid {
  display: grid; }

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)); }

.gap-10 {
  grid-gap: 10px; }

.gap-15 {
  grid-gap: 15px; }

.w-full {
  width: 100%; }

.ipv4_proto_hostname .label,
.ipv6_proto_hostname .label,
.ipv6_proto_supported .label,
.ipv4_proto_supported .label {
  padding: 4px 10px;
  background: green;
  width: fit-content;
  display: flex;
  color: #fff;
  border-radius: 3px;
  font-size: 0.9em !important; }
  .ipv4_proto_hostname .label.label-failed,
  .ipv6_proto_hostname .label.label-failed,
  .ipv6_proto_supported .label.label-failed,
  .ipv4_proto_supported .label.label-failed {
    background: red; }

.ipv4_proto_hostname .label,
.ipv6_proto_hostname .label {
  background: grey; }

#ipv6test-test-passed {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px; }
  #ipv6test-test-passed img {
    margin-right: 20px; }
  #ipv6test-test-passed strong {
    font-size: 22px; }
  #ipv6test-test-passed p {
    margin: 0; }

@keyframes spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

.iptable {
  font-size: 1em; 
}

.iptable th {
  font-size: 1em;
  width: 78px;
}
  
.iptable tr {
  height: 35px; 
}
  
.iptable a {
  text-decoration: none; 
}

.tooltip1 {
  position: relative;
  text-align: right; }
  .tooltip1 .tooltiptext {
    visibility: hidden;
    width: 230px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    text-align: left;
    font-size: 0.9em;
    transform: translateY(50%);
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 50%;
    right: 80%;
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s; }
    .tooltip1 .tooltiptext:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 100%;
      margin-top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent transparent #555; }
  .tooltip1:hover .tooltiptext {
    visibility: visible;
    opacity: 1; }

.header {
  width: 100%;
  margin: 0.5em 0 1.3em;
  color: #16097a;
  text-align: center; }
  .header h2 {
    margin-block-start: .3em;
    margin-block-end: .3em; }
  .header h3 {
    margin-block-start: 0.0em;
    margin-block-end: 0.0em; }

.content {
  margin: 0 auto;
  line-height: 1.6em; }

div#sidebar ul li div.name {
  width: 100%;
  max-width: calc(100% - 80px); }

div#sidebar ul li div.port {
  width: 80px;
  height: 30px;
  text-align: right; }

.tooltip {
  position: relative;
  display: grid;
  grid-template-columns: auto;
  align-items: center; }

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  color: blue;
  width: 280px;
  text-align: center;
  background-color: #fafafa;
  padding: 1em 1.4em;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  line-height: 1.2rem; }
  .tooltip .tooltiptext:after {
    content: "";
    border-radius: 6px;
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0%;
    z-index: -1;
    box-shadow: initial;
    box-shadow: 0px 10px 10px 0px rgba(16, 22, 105, 0.1); }

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible; }

.header h1 {
  color: #16097a;
  font-size: 2rem;
  font-weight: bold;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em; }

div.yourip {
  font-weight: bold;
  width: 100%; }

input.error_value {
  border-color: coral;
  border-style: dashed; }

.error_value {
  text-align: left;
  display: inline; }

.suggest_value {
  text-align: left;
  display: inline; }

.error {
  background: #ff918f !important; }

.ok {
  background: #cce5ff !important; }

.show {
  transition: opacity 400ms; }

#layout {
  position: relative;
  padding-left: 0; }

.col {
  display: flex;
  flex-wrap: wrap;
  width: 100%; }

div#time_server, div#update_time {
  padding: 0.5em 1em 0.5em 1em;
  line-height: 0.8em;
  font-size: 0.75em;
  text-align: right; }

.shadow, .box-light, .box-withTitle .panel-body, div#checkport,
div#lanport,
div#viewipremotely,
div#sidebar,
div#scan-history, .grid-content a {
  position: relative; }
  .shadow:after, .box-light:after, .box-withTitle .panel-body:after, div#checkport:after,
  div#lanport:after,
  div#viewipremotely:after,
  div#sidebar:after,
  div#scan-history:after, .grid-content a:after {
    content: "";
    background: transparent;
    height: 100%;
    width: 92%;
    position: absolute;
    top: 0px;
    left: 4%;
    z-index: -1;
    box-shadow: initial;
    box-shadow: 0px 5px 18px 0px rgba(16, 22, 105, 0.1);
    transition: all .5s ease 0s; }

.box-light {
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 2em;
  background: #fdfdfd; }

.box-withTitle {
  border-radius: 5px;
  margin-bottom: 30px; }
  .box-withTitle .overlay {
    border-radius: 5px; }
  .box-withTitle .panel-body {
    padding: 8px;
    background: #fdfdfd;
    text-align: left;
    position: relative;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px; }
  .box-withTitle .panel-heading {
    background: #0e247d;
    color: #fff;
    padding: 5px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px; }
    .box-withTitle .panel-heading .img {
      cursor: pointer;
      display: flex;
      color: #d3ceff;
      transition: cubic-bezier(0.075, 0.82, 0.165, 1); }
      .box-withTitle .panel-heading .img:hover {
        color: white;
        animation: spin 1.5s linear infinite; 
      }
      .box-withTitle .panel-heading .img-loading {
        color: white;
        animation: spin 1.5s linear infinite; 
      }
    .box-withTitle .panel-heading .panel-title {
      margin: 0;
      padding: 0;
      line-height: 1; }

div#checkport,
div#lanport,
div#viewipremotely,
div#sidebar,
div#scan-history {
  background: #fdfdfd;
  border-radius: 5px;
  padding: 22px 15px 20px;
  margin-bottom: 2em;
  transition: all .5s ease 0s; }
  div#checkport:after,
  div#lanport:after,
  div#viewipremotely:after,
  div#sidebar:after,
  div#scan-history:after {
    transition: all .5s ease 0s; }
  div#checkport:before,
  div#lanport:before,
  div#viewipremotely:before,
  div#sidebar:before,
  div#scan-history:before {
    transition: all .5s ease 0s; }

div#sidebar ul {
  padding: 0;
  margin: 0; }
  div#sidebar ul li:hover {
    cursor: pointer;
    color: blue; }

#result_url_ip, #url_box {
  padding: 0.125em 0.5em 0.125em 0.5em; }

div#public form,
div#lan form,
div#url_ip {
  text-align: center; }

div#public form fieldset,
div#lan form fieldset {
  margin: 0;
  padding: 0em;
  border: 0; }

.url_link {
  display: grid;
  align-items: center; }
  .url_link .url_input {
    text-align: center; }

.url_input {
  width: 100%;
  font-size: medium; }

.copy_button {
  cursor: pointer; }

.url_copy {
  display: inline;
  width: auto; }

div#warning {
  margin: 0rem 2rem;
  font-size: 1.2rem; }

div#note {
  margin: 0.5em; }

div.public_ip {
  font-weight: 900;
  margin: 0.25em 0 1em; }

.public_ip .yourpublicip {
  position: relative;
  color: green; }

.public_ip .yourpublicip:empty:before {
  content: "Unsupported";
  color: red; }

.public_ip .yourpublicip:hover:after {
  content: "Click here to fill as your public IP and copy to clipboard";
  position: absolute;
  left: 0;
  top: 1.5em;
  font-size: .8em;
  font-weight: 400;
  background-color: #000;
  color: #fff;
  border-radius: .5em;
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
  padding: 0 .5em; }

.public_ip .yourpublicip:empty:hover:after {
  content: "";
}

label.ip,
label.port {
  display: inline-block;
  text-align: left;
  padding: .5em 0;
  opacity: 0.85;
  font-size: 0.9em; }

div#checkport h2,
div#lanport h2,
div#viewipremotely h2,
#sidebar h2,
#scan-history h2 {
  text-align: center;
  width: 100%;
  margin-block-start: 0px !important;
  margin-block-end: 0.3em !important;
  font-size: 1.4em; }

div#checkport h2 {
  line-height: 1.4;
  margin-top: 0.5em; }

div#sidebar h2 {
  line-height: 1.4;
  padding-bottom: 1em; }

#result_public {
  margin-top: .5em; }

div#result_public p,
div#result_lan p {
  padding: 0.125em 0.5em 0.125em 0.5em !important;
  margin-block-start: 0px;
  margin-block-end: 0px; }

div#result_public p.result span.failure,
div#result_lan p.result span.failure {
  font-weight: bold;
  font-size: 1.25rem; }

div#result_public p.result span.success,
div#result_lan p.result span.success {
  color: blue;
  font-weight: bold;
  font-size: 1.25rem; }

label.yourpublicip,
b.fill_ip:hover,
#buttons_public {
  margin: 1em 0 0; }

.button {
  cursor: pointer;
  margin: 1em;
  border: 0px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 10px;
  padding: .5em 1em;
  text-transform: uppercase;
  background-size: 18px;
  background-color: blue;
  transition: all 300 cubic-bezier(0.075, 0.82, 0.165, 1);
  text-decoration: none;
  margin: 1em auto;
  display: inline-block;
  width: fit-content; }
  .button#button-intro {
    margin-top: 2em; }

button.check,
button.poll {
  cursor: pointer;
  margin: 0;
  border: 0px;
  color: white;
  font-size: 0.9em;
  border-radius: 5px;
  padding: 12px 15px;
  padding-left: 40px;
  text-transform: uppercase;
  background: url(./imgs/poll1.png) 14px 18px no-repeat;
  background-size: 18px;
  background-color: #0047e7;
  transition: all 300 cubic-bezier(0.075, 0.82, 0.165, 1); }

button.check {
  background: url(./imgs/send1.png) 14px 13px no-repeat;
  background-size: 18px;
  background-color: #0047e7; }

.button:hover,
button.check:hover,
button.poll:hover {
  transition: all 300 cubic-bezier(0.075, 0.82, 0.165, 1);
  opacity: 0.9; }

/* Port Table */
.port-table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1em; }
  .port-table th, .port-table td {
    border: 1px solid #16097a;
    padding: .3em .5em;
    text-align: center; }
  .port-table th {
    background-color: #16097a;
    border: 1px solid #0a0338;
    color: white; }
  .port-table .closed {
    color: #D32F2F;
    font-weight: bold; }
  .port-table .open {
    color: #388E3C;
    font-weight: bold; }

/* Footer */
.footer {
  position: relative;
  margin-top: 2em;
  text-align: center;
  margin: 2em auto 0;
  padding: 2em 0;
  background: #020024;
  background: linear-gradient(329deg, #020024 0%, #090979 35%, #1e7587 100%);
  color: #fff; }
  .footer a {
    color: #fff; }

/* Ads box */
#main {
  min-height: calc(100vh - 220px);
  position: relative; }

.ads_body {
  display: flex;
  position: absolute;
  justify-content: space-between;
  width: 100%; }

.ads_box {
  margin-bottom: 2em; }
  .ads_box img {
    max-width: 100%; }
  .ads_box.ads_box-float {
    width: auto !important; }
    .ads_box.ads_box-float-left {
      left: 0; }
    .ads_box.ads_box-float-right {
      right: 0; }

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px; }

.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; }

.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s; }

@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1; }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0; } }

.overlay {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 2; }

/* Contact form */
#contact_form input, #contact_form textarea {
  font-size: .9em;
  font-family: inherit;
  line-height: 1.5em;
  display: block;
  padding: .5em .8em;
  margin-top: 1em;
  margin-bottom: .5em;
  border-radius: .3em;
  background-color: #f0f0f0;
  border: 0; }

#contact_form .has-error + input,
#contact_form .has-error + textarea {
  border: 1px solid #D32F2F; }

#contact_form button {
  margin-top: 1em; }

#contact_form .text-danger {
  color: #D32F2F;
  font-weight: bold; }

/* Alert */
.alert.success {
  text-align: center;
  color: #388E3C;
  background-color: #d0f5d2;
  border: 1px solid #388E3C;
  border-radius: .3em;
  padding: .5em .8em;
  margin-bottom: 1em;
  font-size: .9em;
  font-weight: bold; }

/* Grid content */
.grid-content {
  display: grid;
  grid-template-columns: auto;
  gap: 1em;
  margin-bottom: 2em; }
  .grid-content a {
    background-color: #2A0080;
    border-radius: .5em;
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 1em; }
    .grid-content a img {
      height: 120px;
      margin: 0 auto;
      display: block; }

/* local script */
.local-scripts {
  margin-bottom: 2em; }
  .local-scripts input {
    font-size: .8em;
    background: #f8f8f8;
    border-radius: 5px;
    border: 1px solid #ddd;
    height: 2.5em;
    padding: 0 .5em;
    color: #424242;
    margin-right: 1em; }
  .local-scripts button {
    height: 2.5em;
    margin: 0; }
  .local-scripts .cell {
    display: flex;
    margin-bottom: 1em;
    margin-top: 1em; }
    .local-scripts .cell input {
      flex: 2; }
    .local-scripts .cell button {
      flex: 1; }

/* Scan History */
#scan-history button {
  background-color: #0047e7;
  cursor: pointer;
  margin: 0;
  border: 0px;
  color: white;
  font-size: 0.8em;
  border-radius: .5em;
  padding: .5em 1em;
  display: block;
  margin-bottom: auto;
  min-width: 80px; }

#scan-history .list-content {
  list-style: none;
  padding: 0; }
  #scan-history .list-content li {
    display: flex;
    font-size: .9em;
    background-color: #f0f0f0;
    padding: .5em;
    border: 1px solid white;
    border-top: none;
    cursor: pointer !important;
    flex-wrap: wrap; }
    #scan-history .list-content li:hover {
      color: blue; }
    #scan-history .list-content li.succeeded {
      background-color: #cce5ff; }
      #scan-history .list-content li.succeeded .result {
        color: green; }
    #scan-history .list-content li.failed {
      background-color: #ff918f; }
      #scan-history .list-content li.failed .result {
        color: red; }
    #scan-history .list-content li:first-child {
      border-radius: .5em .5em 0 0; }
    #scan-history .list-content li:last-child {
      border-radius: 0 0 .5em .5em; }
    #scan-history .list-content li span {
      padding: 0 1em;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis; }
    #scan-history .list-content li .ip, #scan-history .list-content li .port, #scan-history .list-content li .result {
      width: 33.33%; }
    #scan-history .list-content li .result {
      font-weight: bold; }
    #scan-history .list-content li .time {
      width: 100%;
      font-size: .8em;
      text-align: right; }

#scan-history .scan-footer {
  margin-top: 1em;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; }

#scan-history .note {
  font-size: .8em;
  font-style: italic; }

div#checkport, div#lanport, div#viewipremotely, div#sidebar, .box-light, .box-withTitle {
  margin-bottom: 15px; }

.hidden {
  display: none !important; }

@media (min-width: 321px) {
  .ads_body .ads_box {
    visibility: hidden; }
  input.url_input,
  input#ip_input,
  input#port_input {
    margin-bottom: 15px;
    font-size: 1em;
    border-radius: 5px;
    padding: 10px 15px;
    background: #f8f8f8;
    border: 1px solid #ddd; } 
    .banner_desktop {
      display: none;
      max-width: 860px;
      margin: auto;
      padding: 0 15px;
    }
  .banner_mobile {
    display: block;
    max-width: 321px;
    margin: auto;
    padding: 0 15px;
  }
  }

@media (min-width: 768px) {
  html {
    font-size: 16px; }
  .content {
    display: grid;
    grid-template-columns: 60% auto;
    grid-gap: 2em; }
  .check_adv {
    position: relative; }
  .listport {
    position: relative; }
  .tooltip label {
    max-width: 180px; }
  div#checkport, div#lanport, div#viewipremotely, div#sidebar, .box-light, .box-withTitle {
    margin-bottom: 2em; }
  .footer {
    margin-top: 0; }
  .md\:gap-2em {
    grid-gap: 2em; }
  .md\:grid {
    display: grid; }
  .md\:block {
    display: block !important; }
  .md\:flex {
    display: flex !important; }
  .md\:hidden {
    display: none !important; }
  #ipv6test-test-passed {
    margin-bottom: 2em;
    text-align: center; }
  .grid-content {
    grid-template-columns: auto auto; } 
  .banner_desktop {
    display: block;
    max-width: 860px;
    margin: auto;
    padding: 0 15px;
  }
  .banner_mobile {
    display: none;
    max-width: 321px;
    margin: auto;
    padding: 0 15px;
  }
}

@media (min-width: 1024px) {
  label.ip,
  label.port {
    width: 150px; }
  div#checkport,
  .box-light, #checkport, div#lanport, div#viewipremotely, div#sidebar, div#scan-history {
    padding: 2.25em 1.5em 2em; }
  input.url_input,
  input#ip_input,
  input#port_input {
    margin-bottom: 15px;
    font-size: 1em;
    background: #f8f8f8; }
  .grid-content {
    grid-template-columns: auto auto auto; }
  #scan-history .list-content li {
    flex-wrap: nowrap; }
    #scan-history .list-content li .ip, #scan-history .list-content li .port, #scan-history .list-content li .result {
      width: 23%; }
    #scan-history .list-content li .time {
      width: 30%; } 
  .banner_desktop {
    display: block;
    max-width: 860px;
    margin: auto;
    padding: 0 15px;
  }
  .banner_mobile {
    display: none;
    max-width: 321px;
    margin: auto;
    padding: 0 15px;
  }
  }

  .banner_desktop > a > img {
    max-width: 100%;
  }
@media (min-width: 1280px) {
  .ads_body .ads_box {
    visibility: visible; } 
  .banner_desktop {
    display: block;
    max-width: 900px;
    margin: auto;
    padding: 0 15px;
  }
  .banner_mobile {
    display: none;
    max-width: 321px;
    margin: auto;
    padding: 0 15px;
  }
  }

/* Navigation */
#navigation {
  position: relative;
  z-index: 100;
  background: #020024;
  background: linear-gradient(329deg, #020024 0%, #090979 35%, #1e7587 100%);
  margin-bottom: 2em; }
  #navigation a {
    color: #fff; }
  #navigation hr {
    border: 0;
    border-bottom: 1px solid #e0e0e0; }
  #navigation .avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 1.25rem; }
  #navigation .container {
    display: grid;
    grid-template-columns: auto auto;
    height: 80px;
    margin: 0 auto;
    align-items: stretch; }
    #navigation .container .col {
      align-items: center; }
    #navigation .container .menu {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      height: 100%; }
      #navigation .container .menu span {
        padding-left: 2em;
        display: inline-flex;
        align-items: center;
        height: 100%; }
        #navigation .container .menu span a {
          text-transform: uppercase;
          font-size: 0.9rem;
          text-decoration: none; }
    #navigation .container .menu-mobile {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      height: 100%;
      position: relative;
      align-items: center; }
      #navigation .container .menu-mobile .btn {
        width: 2.5rem;
        height: 2.5rem;
        background-color: #efefef;
        border-radius: 1.25rem;
        align-items: center;
        justify-content: center;
        display: inline-flex;
        border: 0; }
  #navigation .menu-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    padding: 5px; }
    #navigation .menu-list a {
      color: #16097a;
      display: block;
      padding: 10px;
      text-decoration: none; }
    #navigation .menu-list a:not([href]) {
      color: #727272;
      font-size: .8em;
      text-transform: uppercase; }

.dropdown {
  position: relative;
  display: inline-block; }

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  top: 60px;
  border-radius: 0.5em;
  overflow: hidden;
  white-space: nowrap; }
  .dropdown-content a {
    color: #0f2b7d !important;
    padding: 1em;
    text-decoration: none;
    display: block; }
    .dropdown-content a:hover {
      color: white !important;
      background-color: #0f2b7d; }

.dropdown:hover .dropdown-content {
  display: block; }

@media (min-width: 321px) {
  #navigation .logo img {
    width: 150px;
    height: auto; } }

@media (min-width: 768px) {
  #navigation .logo img {
    width: 180px;
    height: auto; } 
  }

/* Icon loading ipv4 vs ipv6 */
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 20px;
}
.lds-ellipsis div {
  position: absolute;
  top: 8px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #161616;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
transform: scale(0);
  }
  100% {
transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
transform: scale(1);
  }
  100% {
transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
transform: translate(0, 0);
  }
  100% {
transform: translate(24px, 0);
  }
}

#ipv6-short-address, #ipv6-full-address {
  padding: 4px;
  height: fit-content;
  background-color: #161616;
  color: white;
  font-size: 12px !important;
  border-radius: 50%;
  cursor: pointer;
}

.flex {
  display: flex;
}

.ml-1 {
  margin-left: 4px;
}

.width-125px {
  width: 125px !important;
}

.height-100-34px {
  height: calc(100% - 34px);
}