* {
  box-sizing: border-box;
}

input, button, select, textarea {
  padding: 10px;
  background: none;
  border: 1px solid #bbb;
  border-radius: 3px;
}

button {
  border: none;
  box-shadow: 1px 1px 3px #bbb;
  border-radius: 3px;
  background: #2b72f1;
  color: white;
  font-weight: bolder;
  cursor: pointer;
}

button.cancel {
  background: #ed4242;
}

button.normal {
  background: white;
  color: black;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 14px;
}

th, td {
  padding: 8px 12px;
  border-bottom: 1px solid #ddd;
}

th {
  text-align: left;
  font-weight: 600;
  background: #f7f7f7;
}

tr:hover {
  background: #f0f0f0;
}

tbody tr:last-child td {
  border-bottom: none;
}

hr {
  margin-top: 20px;
  border: 0.1px solid;
}

.modal {
  padding: 20px;
  position: fixed;
  /*backdrop-filter: blur(10px);*/
  /*background: rgba(255,255,255,0.8);*/
  background: white;
  height: 100vh;
  overflow-y: scroll;
  left: 200px;
  top: 0;
  width: calc(100vw - 200px);
  z-index: 9;
}

.logo {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 179px;
  text-align: center;
}


.col-two {
  display: grid;
  grid-template-columns: 2fr 2fr;
  gap: 20px;
}





body { margin: 0; font-family: Arial, sans-serif; display: flex; height: 100vh; }
        #sidebar { position:relative; width: 200px; background: #111; color: #fff; padding: 20px; box-sizing: border-box; }
        #sidebar a { color: #ddd;
      display: block;
      text-decoration: none;
      cursor: pointer;
      border: 1px solid #000;
      padding: 17px;
      margin-left: -20px;
      width: 158px; }
        #sidebar a:hover, #sidebar a.active { color: #fff; background: #222; }
        #content { flex: 1; padding: 30px; height: 100vh; overflow-y: scroll; }
      #sidebar a {
        width: 200px;
      }
      .range-buttons button {
        background: white;
        color: black;
      }
      .range-buttons .active {
        background: #2b72f1;
        color: white;
      }
      .wysi-wrapper {
        line-height: 1;
      }
      .send-now {
        margin-left: 10px;
        padding: 5px;
        background: none;
        color: black;
        box-shadow: none;
        text-decoration: underline;
      }
      .create-variable {
        width: auto!important;
        font-weight: bolder!important;
        padding: 14px!important;
        color: black!important;
        border: 1px solid!important;
      }

      tr.line-through td {
        text-decoration: line-through;
        opacity: 0.3;
      }
      tr.line-through td:nth-of-type(5), tr.line-through td:nth-of-type(6), tr.line-through td:nth-of-type(7) {
        opacity: 1;
      }
      .circle-spin-1 {
        --size: 24px;
        --stroke-width: calc(var(--size) / 6);
        --color: currentColor;
        --animation-timing-function: linear;
        --animation-duration: 1s;
        width: var(--size);
        height: var(--size);
        border-width: var(--stroke-width);
        border-style: solid;
        border-color: var(--color) var(--color) var(--color) transparent;
        border-radius: 50%;
        transform: rotate(0deg);
        animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-1-animation;
      }

      @keyframes circle-spin-1-animation {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }

      body {
        font-family: system-ui, sans-serif;
        background: #f7f7f7;
/*        padding: 40px;*/
        }


        .card {
        max-width: 520px;
        margin: auto;
        background: white;
        padding: 24px;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
        }


        h2 { margin-top: 0; }


        #tab-settings label {
        display: block;
        margin-top: 14px;
        font-weight: 600;
        }


        /*input, select {
        width: 100%;
        padding: 10px;
        margin-top: 6px;
        font-size: 14px;
        }*/


        /*button {
        margin-top: 20px;
        width: 100%;
        padding: 12px;
        font-size: 15px;
        font-weight: bold;
        background: #111827;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        }*/


        .hidden { display: none; }


        .status {
        margin-top: 16px;
        font-size: 14px;
        }


        .error { color: #b91c1c; }
        .success { color: #047857; }
        .hint {
        background: #fef3c7;
        padding: 12px;
        border-radius: 6px;
        margin-top: 12px;
        font-size: 14px;
        }




        .alias-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.alias-item small {
  opacity: 0.6;
}

.alias-item .status-pill {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
}

.status-pill.verified { background: #e6fffa; color: #065f46; }
.status-pill.verifying { background: #fff7ed; color: #9a3412; }
.status-pill.failed { background: #fee2e2; color: #991b1b; }

.status-pill {
  position: relative;
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: default;
}

.status-pill[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(60, 60, 60, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  z-index: 10;
  opacity: 1;
}

.status-pill[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(60, 60, 60, 0.9) transparent transparent transparent;
  z-index: 10;
}




.original-email-wrapper {
  padding: 20px;
  box-shadow: rgb(187, 187, 187) 0px 0px 10px;
  margin: 10px 3px;
  max-width: 800px;
  background: white;
  border-radius: 5px;
}

.followup-email-wrapper {
  position:relative;
/*  padding: 0px 15px;*/
  box-shadow: 0 0 10px #bbb;
  margin: 10px;
  max-width: 400px;
  display: inline-block;
  border-radius:4px;
  padding-bottom:20px;
  background: white;
}



.sends-at {
  font-size: 13px;
  background: #efefef;
  color: black;
  padding: 0 10px 10px;
  width: 100%;
  text-align: center;
  margin: 0;
}

.followup-email-wrapper h4 {
  text-align: center;
  background: #efefef;
  padding: 10px 0;
  margin: 0;
}

.variable {
  background-color: rgb(255, 243, 205);
  padding: 2px 4px;
  border-radius: 3px;
}