/*
 * John Cox Jr. Descendants Family Tree
 * TNG v15 / Template 22 custom stylesheet
 * Target: templates/template22/css/mytngstyle.css
 * Keeps all TNG core and template files untouched.
 * Responsive and crest revision: 30 August 2026
 */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Jura:wght@400;500;600;700&display=swap');

:root {
  --cox-green: #0B7B17;
  --cox-green-dark: #075F12;
  --cox-red: #BF2626;
  --cox-cream: #F7F1E5;
  --cox-cream-light: #FFFDF8;
  --cox-gold: #B68A2C;
  --cox-gold-soft: #F2E5BE;
  --cox-ink: #263126;
  --cox-muted: #667066;
  --cox-border: rgba(182, 138, 44, 0.38);
  --cox-shadow: 0 16px 40px rgba(38, 49, 38, 0.12);
}

html {
  scroll-behavior: smooth;
}

body,
body.index {
  background: var(--cox-cream) !important;
  background-image: none !important;
  color: var(--cox-ink) !important;
  font-family: 'Jura', Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.65;
}

body *,
input,
select,
textarea,
button {
  box-sizing: border-box;
}

a {
  color: var(--cox-green) !important;
  text-decoration-color: rgba(11, 123, 23, 0.35);
  text-underline-offset: 3px;
  transition: color 0.2s ease, background-color 0.2s ease,
    border-color 0.2s ease, transform 0.2s ease;
}

a:hover,
a:focus {
  color: var(--cox-red) !important;
}

#art-main {
  width: min(100%, 1480px) !important;
  margin: 0 auto !important;
  padding: 20px 22px 34px;
}

.art-nav {
  width: 100% !important;
  margin: 0 auto 14px !important;
  min-height: 0 !important;
  position: relative !important;
}

/* The approved Cox crest is inserted by meta.php as a real, linked image. */
.cox-tree-brand {
  display: block;
  width: clamp(118px, 14vw, 190px);
  margin: 0 auto 14px;
  position: relative;
  z-index: 3;
  border-radius: 50%;
  filter: drop-shadow(0 9px 18px rgba(38, 49, 38, 0.16));
}

.cox-tree-brand img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
}

/* Template 22 absolutely positions this wrapper by default.  Keeping it in
   normal flow lets multi-row tablet/phone menus reserve their true height. */
.art-nav-outer,
.art-nav-wrapper {
  width: 100% !important;
  position: relative !important;
}

.art-nav-inner {
  width: 100% !important;
  height: auto !important;
  min-height: 54px;
  padding: 6px 16px !important;
  background: linear-gradient(135deg, var(--cox-green-dark), var(--cox-green)) !important;
  border: 1px solid rgba(242, 229, 190, 0.46) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 26px rgba(7, 95, 18, 0.2) !important;
}

ul.art-hmenu,
ul.art-hmenu ul {
  font-family: 'Jura', Arial, sans-serif !important;
}

ul.art-hmenu > li > a,
ul.art-hmenu > li > a:link,
ul.art-hmenu > li > a:visited {
  color: #FFFFFF !important;
  font-family: 'Jura', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  text-shadow: none !important;
}

ul.art-hmenu > li > a:hover,
ul.art-hmenu > li:hover > a,
ul.art-hmenu > li > a.active {
  background: rgba(242, 229, 190, 0.16) !important;
  color: var(--cox-gold-soft) !important;
  border-radius: 10px !important;
}

ul.art-hmenu ul {
  background: var(--cox-cream-light) !important;
  border: 1px solid var(--cox-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--cox-shadow) !important;
}

ul.art-hmenu ul a {
  color: var(--cox-ink) !important;
  font-weight: 600 !important;
}

ul.art-hmenu ul a:hover,
ul.art-hmenu ul a:focus {
  background: var(--cox-gold-soft) !important;
  color: var(--cox-green-dark) !important;
}

.art-sheet {
  width: 100% !important;
  margin: 0 auto !important;
  border-radius: 24px !important;
  box-shadow: var(--cox-shadow) !important;
  overflow: hidden;
}

.art-sheet-cc {
  background: var(--cox-cream-light) !important;
  border: 1px solid var(--cox-border) !important;
  border-radius: 24px !important;
}

.art-sheet-body,
.art-content-layout,
.art-content-layout-row,
.art-content,
.art-post,
.art-post-body,
.art-post-inner,
.art-article,
.art-postcontent {
  background: transparent !important;
  color: var(--cox-ink) !important;
  font-family: 'Jura', Arial, sans-serif !important;
}

.art-content-layout {
  width: 100% !important;
}

.art-post-body {
  padding: clamp(22px, 3vw, 42px) !important;
}

.big-header,
h1,
h2,
h3,
h4,
.site-head,
.art-blockheader,
.title2 {
  font-family: 'Cinzel Decorative', Georgia, serif !important;
  letter-spacing: 0.015em;
}

.big-header {
  max-width: 100% !important;
  color: var(--cox-green-dark) !important;
  font-size: clamp(34px, 4.7vw, 62px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  text-shadow: none !important;
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4,
.site-head,
.art-blockheader {
  color: var(--cox-green-dark) !important;
}

h1::after,
.big-header::after {
  display: block;
  width: 82px;
  height: 3px;
  margin-top: 13px;
  content: '';
  background: linear-gradient(90deg, var(--cox-red), var(--cox-gold));
  border-radius: 999px;
}

p,
li,
td,
th,
label,
input,
select,
textarea,
button {
  font-family: 'Jura', Arial, sans-serif !important;
}

.art-sidebar1 {
  width: clamp(220px, 22vw, 270px) !important;
  padding: 22px 10px 22px 22px !important;
}

.art-block {
  margin: 0 0 20px !important;
  padding: 18px !important;
  background: linear-gradient(145deg, #FFFFFF, var(--cox-cream)) !important;
  border: 1px solid var(--cox-border) !important;
  border-top: 4px solid var(--cox-green) !important;
  border-radius: 16px !important;
  box-shadow: 0 9px 24px rgba(38, 49, 38, 0.08) !important;
}

.art-blockheader {
  width: 100% !important;
  margin-bottom: 12px !important;
  color: var(--cox-green-dark) !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
}

.art-blockcontent,
.art-blockcontent-body {
  color: var(--cox-ink) !important;
}

.home-menus {
  margin-left: 0 !important;
  padding-left: 20px !important;
  color: var(--cox-ink) !important;
  font-family: 'Jura', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='number'],
select,
textarea,
.mediumfield {
  max-width: 100%;
  min-height: 42px;
  padding: 9px 12px !important;
  background: #FFFFFF !important;
  color: var(--cox-ink) !important;
  border: 1px solid rgba(38, 49, 38, 0.24) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 2px rgba(38, 49, 38, 0.06) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(182, 138, 44, 0.23) !important;
  border-color: var(--cox-gold) !important;
}

.btn,
button,
input[type='button'],
input[type='submit'],
input[type='reset'] {
  padding: 10px 17px !important;
  background: linear-gradient(135deg, var(--cox-green-dark), var(--cox-green)) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border: 1px solid var(--cox-green-dark) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 15px rgba(7, 95, 18, 0.17) !important;
  cursor: pointer;
}

.btn:hover,
button:hover,
input[type='button']:hover,
input[type='submit']:hover,
input[type='reset']:hover {
  background: linear-gradient(135deg, #991E1E, var(--cox-red)) !important;
  border-color: #991E1E !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

.snips-container {
  padding-left: clamp(0px, 2vw, 20px) !important;
}

.postcard {
  overflow: hidden;
  background: #FFFFFF !important;
  border: 1px solid var(--cox-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(38, 49, 38, 0.11) !important;
}

.postcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 32px rgba(38, 49, 38, 0.16) !important;
}

.postcard .thumbnail,
.postcard img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.caption {
  background: linear-gradient(145deg, var(--cox-green-dark), var(--cox-green)) !important;
  color: #FFFFFF !important;
  border-top: 3px solid var(--cox-gold) !important;
  border-radius: 0 0 15px 15px !important;
}

.caption a,
.caption .title2 {
  color: #FFFFFF !important;
}

.caption a:hover {
  color: var(--cox-gold-soft) !important;
}

table {
  max-width: 100%;
  color: var(--cox-ink);
  border-color: var(--cox-border) !important;
}

th,
.fieldnameback,
.databack {
  background-color: var(--cox-gold-soft) !important;
  color: var(--cox-ink) !important;
}

/* TNG places white text inside an inner span on individual/family records. */
.fieldnameback .fieldname,
.fieldnameback > .fieldname,
.whiteback.tfixed .fieldname,
.whiteback.tfixed .fieldname a {
  color: var(--cox-ink) !important;
  text-shadow: none !important;
}

.bar,
.header,
.tngshadow {
  border-color: var(--cox-border) !important;
}

img,
svg,
canvas {
  max-width: 100%;
}

.searchformbox,
.titlebox,
.art-postcontent {
  max-width: 100%;
}

.art-footer {
  width: 100% !important;
  margin-top: 18px !important;
  background: var(--cox-green-dark) !important;
  border-top: 4px solid var(--cox-gold) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(7, 95, 18, 0.16) !important;
}

.art-footer,
.art-footer p,
.art-footer .smaller,
.art-footer .footer {
  color: #FFFFFF !important;
  font-family: 'Jura', Arial, sans-serif !important;
}

.art-footer a {
  color: var(--cox-gold-soft) !important;
}

.art-footer a:hover,
.art-footer a:focus {
  color: #FFFFFF !important;
}

@media (max-width: 1024px) {
  #art-main {
    padding: 14px 14px 26px;
  }

  .art-content-layout-row {
    display: flex !important;
    flex-wrap: wrap;
  }

  .art-sidebar1,
  .art-content {
    width: 100% !important;
  }

  /* A single sidebar block should use the available tablet width. */
  .art-sidebar1 {
    display: block !important;
    padding: 20px 20px 0 !important;
  }

  .art-block {
    margin: 0 0 16px !important;
  }

  .cox-tree-brand {
    width: clamp(120px, 16vw, 155px);
    margin-bottom: 12px;
  }

  .art-nav,
  .art-nav-outer,
  .art-nav-wrapper,
  .art-nav-inner {
    height: auto !important;
    min-height: 0 !important;
  }

  .art-nav {
    margin-bottom: 18px !important;
  }

  /* TNG hides Home and Search below 1100px. Keep the complete utility bar on
     tablets and phones, including Print. */
  #home-smicon,
  #search-smicon,
  #print-smicon {
    display: block !important;
  }

  .icons-rt.in-bar {
    display: flex !important;
  }

  /* The standard responsive presentation replaces TNG's separate mobile
     site, so its footer switch is redundant. */
  .art-footer .btn_lg,
  .mobilefooter .btn_lg {
    display: none !important;
  }

  /* Search Results: show every desktop column and make the complete table
     horizontally swipeable instead of allowing Tablesaw to hide data. */
  .cox-results-hint {
    display: block;
    margin: 10px 0 7px !important;
    color: var(--cox-ink) !important;
    font-size: 13px;
    font-weight: 700;
  }

  .cox-results-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .cox-results-scroll table.thfixed.whiteback {
    display: table !important;
    width: 100% !important;
    min-width: 820px !important;
    max-width: none !important;
    table-layout: auto !important;
  }

  .cox-results-scroll table.thfixed.whiteback th,
  .cox-results-scroll table.thfixed.whiteback td,
  .tablesaw-columntoggle th[class*='tablesaw-priority-'],
  .tablesaw-columntoggle td[class*='tablesaw-priority-'],
  .tablesaw-columntoggle th.tablesaw-cell-hidden,
  .tablesaw-columntoggle td.tablesaw-cell-hidden {
    display: table-cell !important;
  }

  .tablesaw-bar {
    display: none !important;
  }

  /* Balanced three-column primary navigation on tablet. */
  ul.art-hmenu {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    float: none !important;
  }

  ul.art-hmenu > li {
    width: auto !important;
    float: none !important;
  }

  ul.art-hmenu > li > a {
    display: block !important;
    height: 100% !important;
    padding: 9px 8px !important;
    text-align: center;
  }

  /* Homepage text first, then two rows of two equal gateway cards. */
  .art-postcontent {
    display: block !important;
    width: 100% !important;
  }

  .art-postcontent > div:not(.snips-container) {
    width: 100% !important;
    max-width: 100% !important;
  }

  .snips-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 26px !important;
    padding-left: 0 !important;
  }

  .snip-row {
    display: flex !important;
    width: 100% !important;
    gap: 18px;
    align-items: stretch;
  }

  .snip-row > article,
  .snip-row > .contentBox4a,
  .snip-row > .contentBox4b,
  .snip-row > .contentBox4c,
  .snip-row > .contentBox4d {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 0 18px !important;
    flex: 1 1 0;
  }

  /* Balanced record tabs on tablet. */
  #tngnav {
    display: grid !important;
    width: 100% !important;
    margin: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #tngnav li {
    display: block !important;
    width: auto !important;
    float: none !important;
  }

  #tngnav a {
    display: flex !important;
    height: 100% !important;
    min-width: 0 !important;
    align-items: center;
    overflow-wrap: anywhere;
  }

  /* Search Archive: keep the main criteria and lower options as separate
     blocks and give stacked dropdown/text controls breathing room. */
  .searchformbox,
  .searchsidebar {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    float: none !important;
    position: static !important;
    clear: both;
  }

  .searchformbox {
    margin-bottom: 22px !important;
  }

  .searchformbox select {
    margin: 0 8px 10px 0 !important;
  }

  .searchsidebar {
    margin-top: 22px !important;
  }

  /* The surname list and the fixed-width chart area must stack cleanly. */
  body.surnames .titlebox > div[style*='inline-block'],
  #charts {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }

  #charts {
    margin: 28px auto 0 !important;
    overflow: hidden;
  }

  #whole_chart,
  #focus_chart,
  #whole_chart .c3,
  #focus_chart .c3 {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }
}

@media (max-width: 700px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body,
  body.index {
    font-size: 15px;
  }

  #art-main {
    padding: 8px 8px 20px;
  }

  .art-nav-inner,
  .art-sheet,
  .art-sheet-cc,
  .art-footer {
    border-radius: 13px !important;
  }

  .art-nav-inner {
    height: auto !important;
    min-height: 0 !important;
    padding: 6px !important;
  }

  .cox-tree-brand {
    width: 112px;
    margin-bottom: 10px;
  }

  ul.art-hmenu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  ul.art-hmenu > li > a {
    height: auto !important;
    min-height: 44px !important;
    padding: 4px !important;
    font-size: 12.5px !important;
    letter-spacing: 0.01em !important;
    line-height: 1.25 !important;
  }

  ul.art-hmenu > li > a .t {
    display: flex !important;
    min-height: 36px !important;
    padding: 0 4px !important;
    align-items: center;
    justify-content: center;
    font-size: 12.5px !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  .art-sidebar1 {
    display: block !important;
    padding: 14px 14px 0 !important;
  }

  .art-block {
    margin-bottom: 12px !important;
    padding: 15px !important;
  }

  .art-post-body {
    padding: 18px 15px !important;
  }

  .big-header {
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: 1.08 !important;
    overflow-wrap: break-word;
  }

  h1.header,
  #nameheader {
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    font-size: clamp(25px, 7.6vw, 33px) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
  }

  #nameheader sup {
    font-size: 0.46em !important;
    line-height: 0 !important;
    position: relative;
    top: -0.7em;
    vertical-align: baseline !important;
    white-space: nowrap;
  }

  h2.site-head,
  h2.site-head a {
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
  }

  /* Utility menu: show Home, Search, Login, Print, Find, Media and Info in a
     compact two-row grid. Display-contents keeps each dropdown functional. */
  .menucontainer {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 22px !important;
    overflow: visible !important;
    clear: both;
  }

  .menucontainer .innercontainer {
    display: grid !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px 0;
    align-items: stretch;
  }

  .menucontainer .innercontainer > div[style*='inline-flex'],
  .menucontainer .icons,
  ul.tngdd,
  .icons-rt.in-bar {
    display: contents !important;
  }

  .menucontainer .icons .tngsmallicon,
  .icons-rt.in-bar .tngsmallicon {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px;
    margin: 0 !important;
    padding: 7px 3px !important;
    align-items: center;
    justify-content: center;
    font-size: 12px !important;
    line-height: 1.25 !important;
    text-align: center;
  }

  ul.tngdd {
    margin: 0 !important;
  }

  ul.tngdd > li {
    width: auto !important;
    min-width: 0 !important;
    float: none !important;
  }

  ul.tngdd .menulink {
    width: 100% !important;
    height: auto !important;
    min-height: 38px !important;
    padding: 7px 3px 7px 20px !important;
    background-position: 3px center !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    text-align: center;
  }

  /* Keep opened utility submenus fully inside the phone viewport. */
  ul.tngdd ul {
    width: min(180px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    z-index: 1000 !important;
  }

  ul.tngdd ul li {
    width: 100% !important;
  }

  ul.tngdd > li:first-child > ul {
    right: 0 !important;
    left: auto !important;
    transform: none;
  }

  ul.tngdd > li:nth-child(2) > ul {
    right: auto !important;
    left: 0 !important;
    transform: none;
  }

  ul.tngdd > li:last-child > ul {
    right: auto !important;
    left: 0 !important;
    transform: none;
  }

  ul.tngdd ul li a {
    height: auto !important;
    min-height: 24px;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* One gateway card per row on phones. */
  .snips-container {
    margin-top: 22px !important;
    padding-left: 0 !important;
  }

  .snip-row {
    display: block !important;
  }

  .postcard,
  .contentBox4a,
  .contentBox4b,
  .contentBox4c,
  .contentBox4d,
  .snip-row > article {
    width: min(100%, 330px) !important;
    margin: 0 auto 16px !important;
  }

  /* Search form: labels above full-width controls. */
  .searchformbox {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
    float: none !important;
  }

  .searchformbox .rounded-table,
  .searchformbox .rounded-table > tbody,
  .searchformbox .rounded-table > tbody > tr,
  #otherevents table,
  #otherevents tbody,
  #otherevents tr {
    display: block !important;
    width: 100% !important;
  }

  .searchformbox .rounded-table > tbody > tr > td,
  #otherevents td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .searchformbox td.fieldnameback,
  #otherevents td.fieldnameback {
    padding: 10px 12px 4px !important;
    border-right: 0 !important;
  }

  .searchformbox td.databack,
  #otherevents td.databack {
    padding: 4px 12px 12px !important;
  }

  .searchformbox select,
  .searchformbox input[type='text'],
  #otherevents select,
  #otherevents input[type='text'] {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px !important;
  }

  .searchsidebar {
    margin-top: 24px !important;
  }

  .searchsidebar table {
    width: 100% !important;
    table-layout: fixed;
  }

  .searchsidebar td {
    padding: 6px 4px !important;
    vertical-align: middle;
  }

  .searchsidebar td:first-child {
    width: 56% !important;
  }

  .searchsidebar td:last-child {
    width: 44% !important;
  }

  .searchsidebar select {
    width: 100% !important;
    margin: 0 !important;
  }

  .searchsidebar p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 15px !important;
    line-height: 1.55 !important;
  }

  .searchsidebar #searchbtn,
  .searchsidebar #resetbtn {
    display: inline-block !important;
    width: auto !important;
    margin: 0 8px 10px 0 !important;
  }

  .searchsidebar p a.snlink {
    display: inline-block !important;
    max-width: 100% !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  /* Surname lists stack; charts scale inside the viewport. */
  .table-top30,
  .table-top30 > tbody,
  .table-top30 > tbody > tr {
    display: block !important;
    width: 100% !important;
  }

  .table-top30 > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .table-histogram {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
  }

  .table-histogram .bar-holder {
    width: 38% !important;
  }

  form[action='surnames100.php'] {
    display: flex;
    width: 100%;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }

  form[action='surnames100.php'] input[name='topnum'] {
    width: 86px !important;
    flex: 0 0 86px;
  }

  .c3,
  .c3 svg,
  svg.c3-chart,
  canvas {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  #charts,
  #whole_chart,
  #focus_chart {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #charts .subhead {
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
  }

  /* Individual/family records: stack label and value cells. */
  .whiteback.tfixed,
  .whiteback.tfixed > tbody,
  .whiteback.tfixed > tbody > tr {
    display: block !important;
    width: 100% !important;
    table-layout: auto !important;
  }

  .whiteback.tfixed > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  .whiteback.tfixed td.fieldnameback {
    min-height: 0 !important;
    padding: 9px 12px 4px !important;
    border-right: 0 !important;
  }

  .whiteback.tfixed td.databack,
  .whiteback.tfixed td:not(.fieldnameback) {
    padding: 5px 12px 11px !important;
  }

  #tngnav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #tngnav a {
    padding: 8px 7px !important;
    font-size: 13px !important;
  }

  input,
  select,
  textarea,
  button,
  .btn {
    max-width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}