@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes zoomIn {
  0% {transform: scale(0.9);}
  100% {transform: scale(1);}
}

@keyframes zoomOut {
  0% {transform: scale(1);}
  100% {transform: scale(0.9);}
}

h1 {
  font-size: 2em !important;
  margin:.67em 0 !important;
  font-weight: bold !important;
}

h2 {
  font-size: 1.5em !important;
  font-weight: bold !important;
}

a {
  color: rgb(0, 0, 238) !important;
}

textarea {
  width: 99%;
  font-size: 16px;
  resize: none;
}

body {
  --font-family: Verdana;
  --color-black: hsl(0, 0%, 0%);
  --color-blue: hsl(220, 59%, 48%);
  --color-green: hsl(122, 45%, 45%);
  --color-grey: hsl(0, 0%, 85%);
  --color-powder: hsl(201, 70%, 96%);
  --color-red: hsl(5, 69%, 46%);
  --color-white: hsl(0, 0%, 100%);
  --shadow-color: 0deg 0% 50%;

  font-family: var(--font-family);
  margin: 1rem 5rem;

  [hx-swap-oob="true"] {
    display: none;
  }

  .button {
    border-radius: 0.5rem;
    border: 0;
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    margin: 0;
    padding: 0.2rem 0.5rem;
    text-decoration: none;
  }

  .button-act {
    background-color: var(--color-green);
    color: var(--color-white) !important;
  }

  .button-info {
    background-color: var(--color-blue);
    color: var(--color-white) !important;
  }

  .button-accept {
    background-color: var(--color-green);
    color: var(--color-white) !important;
  }

  .button-decline {
    background-color: var(--color-red) ;
    color: var(--color-white) !important;
  }

  .header,
  .footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin: 2rem 0;

    .label {
      margin: 0;
    }

    .search,
    .buttons {
      display: flex;
      gap: 0.5rem;
    }

    .logged {
      display: flex;

      .user {
        padding-right: 10px;
      }
    }
  }

  .alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
  }

  .alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
  }

  .body,
  .domains,
  .aliases {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .body {
    .empty {
      align-items: center;
      display: flex;
      font-size: 1.2rem;
      justify-content: center;
    }

    .new {
      align-self: flex-start;
    }
  }

  .domains,
  .aliases {
    gap: 1rem;
    list-style-type: none;
    margin: 0 0 1rem 0;
    padding: 0;
  }

  .domain,
  .alias,
  .ptr {
    background-color: var(--color-powder);
    border-radius: 0.5rem;
    box-shadow:
      0.6px 0.6px 1px hsl(var(--shadow-color) / 0.15),
      1.4px 1.4px 2.2px -0.6px hsl(var(--shadow-color) / 0.15),
      2.7px 2.6px 4.2px -1.2px hsl(var(--shadow-color) / 0.15),
      5.2px 5.1px 8.2px -1.9px hsl(var(--shadow-color) / 0.15),
      9.9px 9.8px 15.7px -2.5px hsl(var(--shadow-color) / 0.15);
    gap: 0.5rem;
    padding: 0.5rem;
  }

  .domain-new,
  .alias-new {
    &.htmx-swapping {
      opacity: 100;
      transition: opacity 1s ease-in;
    }
  }

  .domain-new,
  .alias-new {
    &.htmx-added {
      opacity: 0;
    }
  }

  .domain-new,
  .alias-new {
    opacity: 1;
    transition: opacity 1s ease-out;
  }

  .domain-disabled,
  .alias-disabled {
    background-color: var(--color-grey);
  }

  .ptr,
  .domain,
  .alias {
    .body {
      align-items: center;
      display: grid;
      grid-template: 1fr / 1fr 1fr;

      .group {
        display: flex;
        flex-direction: column;

        .error {
          color: var(--color-white);
          margin: 0;
        }
      }

      .item {
        display: flex;
        gap: 0.5rem;

        .domain-name,
        .domain-ipaddr,
        .alias-source,
        .alias-destinnation {
          width: 100%;
        }
      }

      .check {
        background: none;
        border: none;
      }

      .label {
        font-weight: 800;

        &::after {
          content: ":";
          padding: 0 0.5rem 0 0;
        }
      }

      .field {
        align-items: center;
        display: flex;
        font-size: 1rem;
        gap: 0.5rem;
      }

      .input {
        border: 0.1rem solid var(--color-grey);
        border-radius: 0.5rem;
        font-size: 1rem;
        padding: 0.3rem;
        width: 100%;
      }

      .select {
        font-size: 1rem;
        background-color: var(--color-white);
        border: 0.1rem solid var(--color-grey);
        border-radius: 0.5rem;
        padding: 0.3rem 0.5rem;
      }

      .actions {
        align-items: center;
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
      }

      .error {
        .input {
          border: 0.2rem solid var(--color-red);
        }

        .message {
          color: var(--color-red);
          margin: 0;
          padding: 0.2rem 0 0.1rem 0.3rem;
        }
      }
    }

    .errors {
      align-items: center;
      display: grid;
      grid-template: 1fr / 1fr 1fr;

      .error {
        .message {
          color: var(--color-red);
          margin: 0;
          margin-bottom: 0.4rem;
          padding: 0.2rem 0 0.1rem 0.3rem;
        }
      }
    }

    .table {
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%;
      display: table;

      tr {
        border-bottom: 1px solid #ccc;
        background-color: #fff;

        &:first-child: {
          background-color: #f1f1f1
        }
      }
    }
  }
}

.headers {
  font-weight: bold;

  .alias-header-source {
    width: 100%;
  }

  .alias-header-destination {
    padding-right: 7rem;
  }

  .domain-header-active {
    width: 1em;
  }

  .domain-header-name,
  .domain-header-ipaddr {
    width: 100%;
  }

  .for-alias {
    padding-right: 4rem;
  }

  .for-domain {
    padding-right: 7rem;
  }
}


span {
  &.valid {
    color: green;
    font-weight: bold;
  }

  &.fail {
    color: red;
    font-weight: bold;
  }
}

.diff{overflow:auto;}
.diff ul{background:#fff;overflow:auto;font-size:13px;list-style:none;margin:0;padding:0;display:table;width:100%;}
.diff del, .diff ins{display:block;text-decoration:none;}
.diff li{padding:0; display:table-row;margin: 0;height:1em;}
.diff li.ins{background:#dfd; color:#080}
.diff li.del{background:#fee; color:#b00}
.diff li:hover{background:#ffc}
/* try 'whitespace:pre;' if you don't want lines to wrap */
.diff del, .diff ins, .diff span{white-space:pre-wrap;font-family:courier;}
.diff del strong{font-weight:normal;background:#fcc;}
.diff ins strong{font-weight:normal;background:#9f9;}
.diff li.diff-comment { display: none; }
.diff li.diff-block-info { background: none repeat scroll 0 0 gray; }

.table {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #dddddd;
  border-collapse: collapse;
}

.table th {
  font-weight: bold;
  padding: 5px;
  background: #efefef;
  border: 1px solid #dddddd;
}

.table td {
  border: 1px solid #dddddd;
  padding: 5px;
}

.container:after, .container:before, .tab-header:after, .tab-header:before {
    content: "";
    display: table;
    clear: both
}

.bottombar {
    border-bottom: 6px solid #ccc !important
}

.tab-padding {
    padding:8px 16px !important
}

.hover-light-grey:hover, .hover-light-gray:hover {
    color: #000 !important;
    background-color: #f1f1f1 !important
}

.border-red {
  border-color: #f44336 !important
}

.container {
  padding:0.01em 16px
}

.third {
  float: left;
  width: 100%
}

@media (min-width: 400px) {
  .third {
    width: 30%
  }
}

a.tabbed {
  background-color:transparent
}

a.tabbed:active, a.tabbed:hover {
  outline-width: 0
}

a.tabbed {
  color: black !important;
}

.user-aliases {
  max-width: 250px;
}

input:disabled,
input[disabled],
button:disabled,
button[disabled]{
  opacity: 0.25;
}

.loader {
  animation: spin 1.5s linear infinite;
  border-radius: 50%;
  border: 0.3rem solid var(--color-grey);
  border-top: 0.3rem solid var(--color-green);
  height: 1rem;
  width: 1rem;
  display: none;
}

#modal {
  /* Underlay covers entire screen. */
  position: fixed;
  top:0px;
  bottom: 0px;
  left:0px;
  right:0px;
  background-color:rgba(0,0,0,0.5);
  z-index:1000;

  /* Flexbox centers the .modal-content vertically and horizontally */
  display:flex;
  flex-direction:column;
  align-items:center;

  /* Animate when opening */
  animation-name: fadeIn;
  animation-duration:150ms;
  animation-timing-function: ease;
}

#modal > .modal-underlay {
  /* underlay takes up the entire viewport. This is only
  required if you want to click to dismiss the popup */
  position: absolute;
  z-index: -1;
  top:0px;
  bottom:0px;
  left: 0px;
  right: 0px;
}

#modal > .modal-content {
  /* Position visible dialog near the top of the window */
  margin-top:10vh;

  /* Sizing for visible dialog */
  width:80%;
  max-width:600px;

  /* Display properties for visible dialog*/
  border:solid 1px #999;
  border-radius:8px;
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
  background-color:white;
  padding:20px;

  /* Animate when opening */
  animation-name:zoomIn;
  animation-duration:150ms;
  animation-timing-function: ease;
}

#modal.closing {
  /* Animate when closing */
  animation-name: fadeOut;
  animation-duration:150ms;
  animation-timing-function: ease;
}

#modal.closing > .modal-content {
  /* Animate when closing */
  animation-name: zoomOut;
  animation-duration:150ms;
  animation-timing-function: ease;
}