#new-datahost-buttons a {
  display: block;
  float: left;
  width: 10rem;
  aspect-ratio: 1;
  border: 1px solid var(--text-blue);
  border-radius: 5px;
  margin-right: 1rem;
  cursor: pointer;
  color: var(--text-blue); }
  #new-datahost-buttons a:hover {
    transform: scale(1.05);
    box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
    text-decoration: none; }
  #new-datahost-buttons a .link-internal {
    width: 10rem;
    height: 10rem;
    display: flex;
    flex-direction: column;
    transition: transform ease-in-out 0.1s, box-shadow ease-in-out 0.1s;
    text-align: center; }
    #new-datahost-buttons a .link-internal .image-wrap {
      max-height: 40%;
      margin-top: 10%;
      margin-bottom: 10%; }
      #new-datahost-buttons a .link-internal .image-wrap img {
        max-width: 100%;
        max-height: 100%; }

#new-datahost-buttons::after {
  content: "";
  display: block;
  clear: both; }

.passwordlike-input {
  color: transparent;
  caret-color: black;
  anchor-name: var(--anchor-name);
  font-family: monospace; }

.passwordlike-input-mask {
  font-size: 0.8em;
  font-family: monospace;
  pointer-events: none;
  display: block;
  line-height: calc(var(--form-element-line-height) + 0.4rem);
  padding-left: 0.5em;
  position-anchor: var(--anchor-name);
  position: absolute;
  left: anchor(left);
  top: calc(anchor(top) + 1px);
  align-self: anchor-left; }

.passwordlike-show-hide-input-button {
  display: inline-block;
  line-height: calc(var(--form-element-line-height) + 0.4rem); }

.datahost-logo.table-inline {
  max-height: 3rem;
  max-width: 3rem; }

.create-edit-datahost-page fieldset {
  display: block;
  margin-bottom: 1.6rem; }
  .create-edit-datahost-page fieldset input, .create-edit-datahost-page fieldset textarea {
    min-width: 30rem;
    display: inline-block;
    height: 1.625rem;
    width: 30rem; }

.create-edit-datahost-page input + .field-error,
.create-edit-datahost-page textarea + .field-error {
  margin-left: 1rem; }

.create-edit-datahost-page i.fw {
  width: 1.6rem; }

.datahosts-table td {
  line-height: 2rem !important; }
  .datahosts-table td button {
    display: inline-block !important; }

.datahosts-table td, .datahosts-table th {
  padding-left: 1em;
  padding-right: 1em; }
  .datahosts-table td.technology, .datahosts-table th.technology {
    width: 12ch; }
  .datahosts-table td.status, .datahosts-table th.status {
    width: 28ch; }
    .datahosts-table td.status span, .datahosts-table th.status span {
      line-height: 2rem;
      display: inline-block;
      width: 24ch;
      background: var(--border-light-grey);
      width: calc(100% - 2rem);
      border-radius: 1rem;
      padding-left: 2rem; }
      .datahosts-table td.status span::before, .datahosts-table th.status span::before {
        float: left;
        margin-left: -1.3rem;
        margin-top: 0.75rem;
        content: "";
        border-radius: 100%;
        width: 0.5rem;
        height: 0.5rem;
        background: var(--border-light-grey-darker); }
      .datahosts-table td.status span.connected, .datahosts-table th.status span.connected {
        background: var(--confirm-lighter); }
        .datahosts-table td.status span.connected::before, .datahosts-table th.status span.connected::before {
          background: var(--confirm); }
      .datahosts-table td.status span.errored, .datahosts-table th.status span.errored {
        background: var(--hazard-lighter); }
        .datahosts-table td.status span.errored::before, .datahosts-table th.status span.errored::before {
          background: var(--hazard); }
  .datahosts-table td:nth-last-child(1), .datahosts-table td:nth-last-child(2), .datahosts-table td:nth-last-child(3), .datahosts-table th:nth-last-child(1), .datahosts-table th:nth-last-child(2), .datahosts-table th:nth-last-child(3) {
    width: 2rem;
    padding-left: 0em;
    padding-right: 0em; }

.datahosts-table tbody tr:hover {
  background: var(--bg); }