:root {
  /* brushed steel (blue theme kept below as comment) */
  --headfoot-background: #3a4048;
  --headfoot-color: #eef1f4;
  --headfoot-link-color: #eef1f4;
  --headfoot-link-color-hover: #e39a5b;

  --main-background-light: #f2f4f6;
  --main-background-dimmed: #e4e8ec;
  --main-color: #2b3440;
  --main-link-color: #b87333;
  --main-link-color-hover: #d98f4e;

  --headline-background: #dfe3e8;
  --headline-color: #2b3440;
  --headline-border-color: #8a929b;
  /* blue (previous theme)
  --headfoot-background: rgba(40, 58, 90, 0.9);
  --headfoot-color: #ffffff;
  --headfoot-link-color: #ffffff;
  --headfoot-link-color-hover: #73c5eb;

  --main-background-light: #ffffff;
  --main-background-dimmed: rgb(248, 249, 250);
  --main-color: #444444;
  --main-link-color: #47b2e4;
  --main-link-color-hover: #73c5eb;

  --headline-background: #f3f5fa;
  --headline-color: rgb(55, 81, 126);
  --headline-border-color: rgba(40, 58, 90, 0.9);
  */
  
  /* green */
  /*
  --headfoot-background: #004d00;
  --headfoot-color: #ffffff;
  --headfoot-link-color: #ffffff;
  --headfoot-link-color-hover: #66ff66;
  
  --main-background-light: #ffffff;
  --main-background-dimmed: #ffffe5;
  --main-color: #444444;
  --main-link-color: #006600;
  --main-link-color-hover: #66ff66;
  
  --headline-background: #e6ffe6;
  --headline-color: #006600;
  --headline-border-color: #006600;
  */
}

body {
  color: var(--main-color);
  background-color: var(--headfoot-background);
}

.mycontainerbg {
    background: var(--main-background-light);
    padding-top: 0.1px;
    padding-bottom: 0.1px;
}

.k8-element-hint:after{
  content:attr(value);
  font-size:12px;
  background:yellow;
  color:black;
  border-radius:50%;
  border: solid 1px #ccc;
  padding:0;
  position:relative;
  left: 8px;
  bottom: 16px;
  opacity:0.9;
}

.k8-page-content{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  min-height: 200px;
}

.k8-bg-stripes>div:nth-child(odd) {
    background-color: var(--main-background-light);
}
.k8-bg-stripes>div:nth-child(even) {
    background-color: var(--main-background-dimmed);
}

/* header */
h1{
  font-weight: bold;
  color: var(--headline-color);
}

.k8-headline0 {
    background-color: var(--headline-background);
}

.masterdata .headline {
    background-color: var(--headline-background) !important;
    border: 0;
}

.masterdata .maindata, .k8-by-blue {
    border-top: 3px solid var(--headline-border-color);
    border-bottom: 3px solid var(--headline-border-color);
}

/* links */
a {
  color: var(--main-link-color);
  text-decoration: none;
}
a:hover {
  color: var(--main-link-color-hover);
  text-decoration: none;
}

footer a {
    color: var(--headfoot-link-color);
}
footer a:hover{
  color: var(--headfoot-link-color-hover);
}

/* header navbar */
.navbar-brand, #pagetimer, .navbar .nav-link{color:var(--headfoot-link-color);}
.navbar-brand:hover, .navbar .nav-link:hover{
  color:var(--headfoot-link-color-hover);
}
.navbar-nav .nav-item .active,
.navbar-nav .nav-link.show{
  color:var(--headfoot-link-color-hover);
}
.navbar-toggler{
  color:white;
  border-color:white;
}
.navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* footer */
footer {
  color: var(--headfoot-color);
}

/* landing page */
.generate-content{
  padding:0 100px;
}
@media only screen and (max-width: 576px) {
  .generate-content{
    padding: 0 calc(var(--bs-gutter-x) * .5);
  }
}

/* tabulator */
.row_selected,
.tabulator-row.tabulator-selected,
.tabulator-row.tabulator-selectable:hover {
  opacity:0.6
}

@media print {
  footer {
    display: none !important;
  }
}
/* calmer form fields (master data forms): light border, slightly tinted, blue focus ring in the link colour of the page */
form.masterdata-form .form-control,
form.masterdata-form .form-select {
  border: 1px solid #d7e0ec;
  border-radius: 4px;
  background-color: #fbfcfe;
}
form.masterdata-form .form-control:focus,
form.masterdata-form .form-select:focus {
  background-color: #fff;
  border-color: var(--main-link-color, #47b2e4);
  box-shadow: 0 0 0 3px rgba(71, 178, 228, 0.2);
}
form.masterdata-form .form-control:disabled,
form.masterdata-form .form-control[readonly] {
  background-color: #f1f5f9;
}

/* ===== brushed steel metallic theme ===== */
body {
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.05) 1px 2px),
                    linear-gradient(180deg, #4a5059, #2f343b);
}
header, footer {
  background-image: linear-gradient(180deg, #5a616b 0%, #3a4048 55%, #2b3036 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.35);
}
header .navbar { background: transparent; }
.mycontainerbg, .masterdata .maindata {
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 1px, rgba(0,0,0,.025) 1px 2px),
                    linear-gradient(180deg, #f8f9fb, #e4e8ec);
}
h1 { text-shadow: 0 1px 0 #fff, 0 -1px 0 rgba(0,0,0,.15); }
.btn-primary, .btn-outline-primary:hover {
  color: #1f262e; border: 1px solid #7d858f;
  background-image: linear-gradient(180deg, #fdfdfe 0%, #cfd5dc 48%, #b4bcc5 52%, #dde2e7 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.3);
}
.btn-primary:hover { background-image: linear-gradient(180deg, #fff 0%, #dbe0e6 48%, #c3cad2 52%, #e8ebef 100%); }
.btn-primary:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
.tabulator .tabulator-header {
  background-image: linear-gradient(180deg, #f4f6f8, #b9c0c8); color: #1f262e;
}
.tabulator .tabulator-row.tabulator-row-even { background-color: #e9edf1; }
.navbar-nav .nav-item .active, .navbar-nav .nav-link.show { color: #c4772f; font-weight: 600; }
.navbar .dropdown-item.active, .navbar .dropdown-item:active {
  color: #fff; font-weight: 600;
  background-color: #8a4f1c;
  background-image: linear-gradient(180deg, #a8631f 0%, #8a4f1c 55%, #744016 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
form.masterdata-form .form-control:focus, form.masterdata-form .form-select:focus {
  border-color: #b87333; box-shadow: 0 0 0 3px rgba(184,115,51,.25);
}

/* ===== brushed steel: tabulator ===== */
.tabulator {
  background-color: #eef1f4;
  border: 1px solid #8a929b;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.25);
}
.tabulator .tabulator-header {
  background-image: linear-gradient(180deg, #fbfcfd 0%, #d3d9df 48%, #b4bcc5 52%, #c9d0d7 100%);
  border-bottom: 1px solid #7d858f;
  box-shadow: inset 0 1px 0 #fff;
  color: #1f262e;
}
.tabulator .tabulator-header .tabulator-col {
  background: transparent;
  border-right: 1px solid rgba(125,133,143,.55);
}
.tabulator .tabulator-header .tabulator-col:hover { background-image: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"],
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] { color: #8a4f1c; }
.tabulator .tabulator-header .tabulator-header-filter input,
.tabulator .tabulator-header .tabulator-header-filter select {
  background: #f7f8fa; border: 1px solid #9aa2ab; border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
.tabulator .tabulator-header .tabulator-header-filter input:focus {
  border-color: #b87333; box-shadow: 0 0 0 2px rgba(184,115,51,.25); outline: 0;
}
.tabulator-row { background-color: #f4f6f8; border-bottom: 1px solid #d3d8de; }
.tabulator-row.tabulator-row-even { background-color: #e6eaee; }
.tabulator-row .tabulator-cell { border-right: 1px solid #d3d8de; }
.tabulator-row.tabulator-selectable:hover { background-color: #f3dfcc; opacity: 1; }
.tabulator-row.tabulator-selected { background-color: #e7c4a0; opacity: 1; }
.tabulator .tabulator-footer {
  background-image: linear-gradient(180deg, #d9dee3, #b9c0c8);
  border-top: 1px solid #7d858f;
  box-shadow: inset 0 1px 0 #fff;
  color: #1f262e;
}
.tabulator .tabulator-footer .tabulator-page { background: linear-gradient(180deg, #fdfdfe, #cfd5dc); border: 1px solid #7d858f; }
.tabulator .tabulator-footer .tabulator-page.active { background: #b87333; color: #fff; border-color: #8a4f1c; }