.card .banner-img{transition: all .8s !important;}
.card:hover .banner-img{transform: rotatey(360deg);}

.card-content a.badge:hover{color:white;}

.card-circle a{color:white;}
.card-circle a:hover{color:white;}
.mycard{border:1px solid white;}
.mycard:hover{border:1px solid #a1d7ee;}

:root{
    --navy:#161658;
    --blue:#1f9cd2;
    --dark:#3a3a40;
    --red:#f00;
    --accent: #6777ef;
}

/* Blog */
.tesDB-Blog{font-size: 18px !important;color:var(--dark);}
.head1{color:var(--navy);font-weight: 800;font-size:32px;}

.invoice p, .invoice ul{font-size: 17px !important;color:var(--dark) !important;text-align: justify;}

.subhead1{font-weight: 800;text-decoration: underline;text-underline-offset: 3px;text-decoration-thickness: 2px;
    color:var(--navy);font-size:20px;}
.subhead2{font-weight: 800;color:var(--blue);font-size:18px;}
.subhead3{font-weight: 700;color:var(--blue);font-size:16px;}

.red{color:var(--red);}
.bold{font-weight: 800 !important;}
.italic{font-style: italic !important;}

.coding-area{background-color: #f5f5f5;color:#363535;border-radius: 5px;
padding:20px !important;border:1px solid #9e9c9c;margin:0px 0px 30px;}

.warn-area{background-color: #fff2cc;color:#363535;border-radius: 5px;font-size: 14px;
padding:20px !important;border:1px solid #f4b942;margin:15px 0px 30px;}

.note-area{background-color: #d6e4f0;color:#363535;border-radius: 5px;font-size: 14px;
padding:20px !important;border:1px solid #2e75b6;margin:15px 0px 30px;}


.syntax{display:block;font-style:italic;margin-bottom:.2em;}

.table-responsive table th a{color:var(--dark);font-weight: bold;font-size: 16px;}

.blog-img{margin:10px 0px 20px 20px;} 
@media only screen and (max-width: 600px) 
{
    .blog-img{width:100%;}
}


/* table */
.container {
      width: 100%;
      max-width: 920px;
    }
 
    .card {
      background: #fff;
      border-radius: 0px;
      box-shadow: 0 4px 24px rgba(44, 62, 107, 0.10);
      overflow: hidden;
    }
 
    .card-header {
      background: #2c3e6b;
      padding: 1.25rem 1.75rem;
      display: flex;
      align-items: center;
      gap: 12px;
    }
 
    .card-header .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #5d8cf7;
      opacity: 0.7;
    }
 
    .card-header h1 {
      font-size: 15px;
      font-weight: 600;
      color: #e8edf8;
      letter-spacing: 0.03em;
    }
 
    .card-header .subtitle {
      font-size: 12px;
      color: #8fa3cc;
      margin-left: auto;
    }
 
    .table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding:0px 0px 15px 0px;
    }
 
    .table-wrap tr,.table-wrap td, .table-wrap th {
      border:1px solid rgb(168, 168, 168);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      min-width: 520px;
    }
 
    thead tr {
      background: #3a4f85;
    }
 
    thead th {
      padding: 13px 18px;
      text-align: left;
      font-weight: 600;
      font-size: 12px;
      color: #c5d3f0;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      white-space: nowrap;
      border-bottom: 2px solid #2c3e6b;
    }
 
    tbody tr {
      border-bottom: 1px solid #eef0f6;
      transition: background 0.15s ease;
    }
 
    tbody tr:nth-child(odd) {
      background: #f8f9fc;
    }
 
    tbody tr:nth-child(even) {
      background: #ffffff;
    }
 
    tbody tr:hover {
      background: #eef3ff;
    }
 
    tbody td {
      padding: 13px 18px;
      vertical-align: middle;
      color: #2d3a55;
    }
 
    .col-node {
      font-weight: 600;
      font-size: 13.5px;
      color: #1e2a45;
    }
 
    .col-ip, .col-id {
      font-family: 'Courier New', Courier, monospace;
      font-size: 13px;
      color: #4a5568;
      letter-spacing: 0.03em;
    }
 
    .col-desc {
      color: #637089;
      font-size: 13px;
      line-height: 1.5;
    }
 
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 11px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
 
    .badge::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      display: inline-block;
    }
 
    .badge-primary {
      background: #dbeafe;
      color: #1e40af;
    }
 
    .badge-primary::before {
      background: #3b82f6;
    }
 
    .badge-standby {
      background: #fef3c7;
      color: #92400e;
    }
 
    .badge-standby::before {
      background: #f59e0b;
    }
 
    .card-footer {
      padding: 0.9rem 1.75rem;
      border-top: 1px solid #eef0f6;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f8f9fc;
    }
 
    .card-footer span {
      font-size: 12px;
      color: #8fa3cc;
    }
 
    .status-ok {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #16a34a;
      font-weight: 500;
    }
 
    .status-ok::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #22c55e;
      display: inline-block;
    }
 
    /* Responsive */
    @media (max-width: 600px) {
      .card-header h1 { font-size: 13px; }
      .card-header .subtitle { display: none; }
      thead th, tbody td { padding: 11px 12px; }
      table { font-size: 13px; }
    }


/* boxes */
.note-box {
      background: #eef2ff;
      border-left: 4px solid var(--accent);
      border-radius: 6px;
      padding: 14px 18px;
      margin: 15px 0 25px;
      font-size: 16px;
    }
    .warn-box {
      background: #fff8e1;
      border-left: 4px solid #f6c000;
      border-radius: 6px;
      padding: 14px 18px;
      margin: 15px 0 25px;
      font-size: 16px;
    }
    .tip-box {
      background: #e8f5e9;
      border-left: 4px solid #43a047;
      border-radius: 6px;
      padding: 14px 18px;
      margin: 15px 0 25px;
      font-size: 16px;
    }

    .toc-box {
      background: #fff;
      border: 1px solid #dde2f0;
      border-radius: 8px;
      padding: 20px 25px;
      margin-bottom: 30px;
    }
    .toc-box h5 { color: var(--navy); font-weight: 800; margin-bottom: 12px; }
    .toc-box ol { margin: 0; padding-left: 20px; }
    .toc-box ol li { margin-bottom: 6px; }
    .toc-box a { color: var(--accent); text-decoration: none; font-size: 16px; }
    .toc-box a:hover { text-decoration: underline; }


    .ts-badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .5px;
      text-transform: uppercase;
      margin-left: 8px;
      vertical-align: middle;
    }
    .badge-range     { background: #e8eafd; color: #2c3e9a; }
    .badge-list      { background: #e8f5e9; color: #1a7a2c; }
    .badge-hash      { background: #fff3e0; color: #b36a00; }
    .badge-composite { background: #fce4ec; color: #b71c1c; }
    .badge-interval  { background: #e0f7fa; color: #006064; }
    .badge-ref       { background: #f3e5f5; color: #6a1b9a; }

    .ts-badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .5px;
      text-transform: uppercase;
      margin-left: 8px;
      vertical-align: middle;
    }
    .badge-critical { background: #fde8e8; color: #c0392b; }
    .badge-system   { background: #e8eafd; color: #2c3e9a; }
    .badge-temp     { background: #e8f8e8; color: #1a7a2c; }
    .badge-undo     { background: #fff3e0; color: #b36a00; }

    .sql-label {
      display: inline-block;
      background: #313244;
      color: #89b4fa;
      font-size: 11px;
      font-family: 'Source Code Pro', monospace;
      font-weight: 600;
      letter-spacing: 1px;
      padding: 2px 10px;
      border-radius: 4px 4px 0 0;
      margin-bottom: -1px;
      text-transform: uppercase;
    }