:root {
  --color-primary: #00ced1;

  --color-topnav-t2: #007878;
  --color-topnav-t3: #006868;

  --color-primary-t2: #009898;
  --color-primary-t3: #008686;


  --color-dark-t2: #002828;
  --color-dark-t3: #001818;

  --color-light-t2: #cce8e8;
  --color-light-t3: #bbd8d8;

  --color-tertiary-t2: rgb(0, 241, 245);
  --color-tertiary-t3: rgb(0, 226, 230);

  --color-secondary-t2: #777;
  --color-secondary-t3: #666;
  --color-success-t2: #00cb3a;
  --color-success-t3: #00b726;
  --color-info-t2: #6298e5;
  --color-info-t3: #5086d3;
  --color-warning-t2: #e6ed11;
  --color-warning-t3: #d6dd01;
  --color-danger-t2: #ec3333;
  --color-danger-t3: #da2121;

  --color-highlight: #00ced1;

  --color-accent: #ff9e5e;
  --color-accent-t2: #ffb78a;
  --color-border: #008a8a;
  --color-text-dark: #001515;
  --color-text-light: #f0ffff;
  --color-body-bg: #f5fafb;
  --shadow-glow: 0 0 10px rgba(0, 206, 209, 0.5);
  --shadow-depth: 0 4px 8px rgba(0, 0, 0, 0.2);
}

body { background:var(--color-body-bg); }
.bg-topnav .nav-link,
.bg-primary .nav-link,
.bg-dark .nav-link { color:var(--color-text-light); }

.btn { text-shadow:1px 1px 3px #000b; transition:0.2s; }
.btn:hover { filter:brightness(1.1); box-shadow:var(--shadow-glow); }
.btn:active { transform:scale(0.97); }

.bg-topnav { background:linear-gradient(var(--color-topnav-t2) 50%, var(--color-topnav-t3) 50%); }
.bg-primary { background:linear-gradient(var(--color-primary-t2) 50%, var(--color-primary-t3) 50%); }
.bg-dark,
table.table tr.table-dark th { background:linear-gradient(var(--color-dark-t2) 50%, var(--color-dark-t3) 50%); }
.bg-light,
table.table tr th { background:linear-gradient(var(--color-light-t2) 50%, var(--color-light-t3) 50%); }
.bg-tertiary, .bg-body-tertiary { background:linear-gradient(var(--color-tertiary-t2) 50%, var(--color-tertiary-t3) 50%); }

.btn-primary,
.btn.btn-outline-primary:hover,
.btn-check:checked+.btn,
.bg-primary { background:linear-gradient(var(--color-primary-t2) 50%, var(--color-primary-t3) 50%); border:0px; }
.btn-dark,
.btn.btn-outline-dark:hover,
.bg-dark { background:linear-gradient(var(--color-dark-t2) 50%, var(--color-dark-t3) 50%); border:0px; }
.btn-light { background:linear-gradient(var(--color-light-t2) 50%, var(--color-light-t3) 50%); border:0px; text-shadow:none; }
.btn-tertiary { background:linear-gradient(var(--color-tertiary-t2) 50%, var(--color-tertiary-t3) 50%); border:0px; }
.btn-secondary,
.btn.btn-outline-secondary:hover { background:linear-gradient(var(--color-secondary-t2) 50%, var(--color-secondary-t3) 50%); border:0px; }
.btn-success,
.btn.btn-outline-success:hover,
.bg-success { background:linear-gradient(var(--color-success-t2) 50%, var(--color-success-t3) 50%); border:0px; }
.btn-info,
.btn.btn-outline-info:hover,
.bg-info { background:linear-gradient(var(--color-info-t2) 50%, var(--color-info-t3) 50%); border:0px; color:var(--color-text-light); }
.btn-info:hover { color:var(--color-text-light); }
.btn-warning,
.btn.btn-outline-warning:hover,
.bg-warning { background:linear-gradient(var(--color-warning-t2) 50%, var(--color-warning-t3) 50%); border:0px; text-shadow:none; }
.btn-danger,
.btn.btn-outline-danger:hover,
.bg-danger { background:linear-gradient(var(--color-danger-t2) 50%, var(--color-danger-t3) 50%); border:0px; }
.btn-link { text-shadow:none; color:var(--color-highlight); }

.bg-warning, .bg-light { color:var(--color-text-dark); }

.btn.btn-outline-primary,
.btn.btn-outline-secondary,
.btn.btn-outline-success,
.btn.btn-outline-info,
.btn.btn-outline-warning,
.btn.btn-outline-danger,
.btn.btn-outline-dark
 { text-shadow:none; }
.btn.btn-outline-light { text-shadow:none; color:var(--color-highlight); }

.btn.btn-outline-primary { border-color:var(--color-primary-t3); color:var(--color-primary-t2); }
.btn.btn-outline-primary:hover { color:var(--color-text-light); border:1px solid var(--color-primary-t3); }

.btn.btn-outline-dark:hover { color:var(--color-text-light); border:1px solid var(--color-dark-t3); }
.btn.btn-outline-info { border-color:var(--color-info-t3); color:var(--color-info-t2); }
.btn.btn-outline-info:hover { color:var(--color-text-light); border:1px solid var(--color-info-t3); }
.btn.btn-outline-success { border-color:var(--color-success-t3); color:var(--color-success-t2); }
.btn.btn-outline-success:hover { color:var(--color-text-light); border:1px solid var(--color-success-t3); }
.btn.btn-outline-danger { border-color:var(--color-danger-t3); color:var(--color-danger-t2); }
.btn.btn-outline-danger:hover { color:var(--color-text-light); border:1px solid var(--color-danger-t3); }
.btn.btn-outline-secondary { border-color:var(--color-secondary-t3); color:var(--color-secondary-t2); }
.btn.btn-outline-secondary:hover { color:var(--color-text-light); border:1px solid var(--color-secondary-t3); }
.btn.xbtn-outline-warning { border-color:var(--color-warning-t3); color:var(--color-warning-t2); }
.btn.btn-outline-warning:hover { color:var(--color-text-dark); border:1px solid var(--color-warning-t3); }

.text-primary,
.card-link,
.breadcrumb-item a,
.page-item .page-link { color:var(--color-highlight) !important; }
.page-item.active .page-link { background:var(--color-primary-t2); color:var(--color-text-light) !important; }
.text-success,
.valid-feedback { color:var(--color-success-t2) !important; }
.text-info { color:var(--color-info-t3) !important; }

input[type="text"].is-valid { border:1px solid var(--color-success-t2); }

.nav-tabs .nav-link.active { background:linear-gradient(var(--color-text-light) 50%, var(--color-body-bg) 50%); border:0px; text-shadow:none; border:1px solid #ccc; border-bottom:1px solid var(--color-body-bg); border-top:3px solid var(--color-primary-t2); margin-bottom:-2px; }

.border-primary { border-color:var(--color-primary-t2) !important; }
.border-secondary { border-color:var(--color-secondary-t2) !important; }
.border-success { border-color:var(--color-success-t2) !important; }
.border-danger { border-color:var(--color-danger-t2) !important; }
.border-warning { border-color:var(--color-warning-t3) !important; }
.border-info { border-color:var(--color-info-t2) !important; }

.form-check-input:checked { background-color:var(--color-primary-t2); }
.accordion-button:not(.collapsed) { background-color:var(--color-light-t2); }