/* Consolidated responsive site stylesheet for Skandis Systems
   - mobile-first, modern layout and legacy compatibility
   - dropdowns, bullet fallbacks, overlay, left-menu toggle
*/

@import "master.css";

/* Root variables */
:root{
  /* --top-blue: #111160; */
  --banner-bg: #6699CC;
  --top-blue: #6699CC;
  /* background: linear-gradient(180deg, var(--top-blue), #0e114f);*/
  /* --top-blue: linear-gradient(180deg, #6699CC, #0e114f); */
  --dark-blue: #111160;
  --trans-blue: #386ea3;
  --left-bg: #EDEDED;
  --muted: #999999;
  --gap: 12px;/* 24px; */
  --leftmenu: 240px;/* 24px; */
}

/* Reset / base */
*{box-sizing:border-box}

/* * {
  font-weight: normal;
  font-size: 10pt;
  color: #727272;
  font-style: normal;
  font-family: "Montserrat",sans-serif;
  text-decoration: none
} */

 /* from demo_startup.htm tools */
a:link,.q:visited,.q:link,.q:active{color:#00c;font-size: 16px;}
.q2:visited,.q2:link,.q2:active{color:#00c;font-size: 16px;}
a:visited{color:#551a8b}
a:hover{color:red;}
a:active{color:#f00}

a.q2:link{color:black}
a.q2:visited{color:black}
a.q2:hover{color:red;}
a.q2:active{color:black}

.tabbar{background-color:#e5ecf9}

/* .tab{background-color: #e5ecf9;border-bottom:1px solid #36c;padding:0 1.3em;font-weight:bold;white-space:nowrap;font-family:"Montserrat,sans-serif";font-size:83%} */
/* .tab{background-color: #e5ecf9;border-bottom:1px solid #36c;padding:0 0.5em;font-weight:bold;white-space:nowrap;font-family:"Montserrat,sans-serif";} */
.active{background-color:#fff;color:#000;border:1px solid #36c;border-bottom:1px solid #fff}
.tab_footer{border-top:1px solid #ccc;padding-top:1em;width:98%}

html,body{height:100%}
body{font-family: Arial, Helvetica, sans-serif; margin:0; color:#111}
img.img-responsive{max-width:100%;height:auto;display:block}

/* Site wrapper (default: not grid unless legacy has-side) */
.site-wrapper{width:100%;margin:0 auto}
.site-wrapper.has-side{display:grid;grid-template-columns:var(--leftmenu) minmax(0,1fr);grid-template-rows:auto 1fr auto;min-height:100vh;gap:var(--gap)}

/* Header */
.site-header{display:flex;align-items:center;gap:12px;padding:10px 12px;background:transparent;}
.site-headerTools{display:flex;align-items:center;gap:0px;padding:0px 0px;background:transparent;}
.logo{height:48px;width:auto}
.site-header .logo-link{display:inline-block}

/* Top nav (built by JS). Mobile: initially hidden; shown via CSS on wider screens */
.top-nav{display:block}
.top-nav ul{display:flex;gap:10px;list-style:none;margin:0;padding:0;align-items:center}
.top-nav a{color:#fff;text-decoration:none;padding:6px 8px;border-radius:3px;display:inline-flex;align-items:center;gap:8px}
.top-nav a:hover,.top-nav .active{background:rgba(255,255,255,0.12)}

/* Toggle button (Resources) - default visible; will be moved into .layout by JS */
.left-menu-toggle{
  display:inline-block !important;
  visibility:visible !important;
  opacity:1 !important;
  cursor:pointer;background:transparent;border:1px solid rgba(0,0,0,0.06);
  font-size:16px;padding:6px 8px;color:var(--top-blue);
  margin-top:-6px;
  padding-top:0px;
  border-radius:0px;
  /* border-radius:4px; */
  z-index:1200;
}

/* Layout: default stack on mobile */
.layout{display:block;padding:0px 4px;width:100%;}/*padding:12px*/
/* Layout: default stack on mobile */
.layoutTools{display:block;padding:0px 0px;width:100%;}/*padding:12px*/

/* Default styles (mobile first) */
.nav-desktop { display: none; }

/* Modern two-column layout for wide screens: aside inside .layout 880px*/
/* @media (min-width:750px 750px){ */

@media screen and (min-width: 750px) {
/* @media (min-width:750px){ */
  /* .layout{display:grid;grid-template-columns:var(--leftmenu) minmax(0,1fr);gap:24px;align-items:start} */
  /* .layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:12px;align-items:start}
  .layout > .left-column{grid-column:1/2;display:flex;flex-direction:column;gap:8px}
  .layout > #left-menu,.layout > aside.left-menu{grid-column:1/2;align-self:stretch}
  .layout > article.content,.layout > .content{grid-column:2/-1} */
  /* Desktop: reserve a consistent left column so content never overlaps */
  .layout{display:grid;grid-template-columns:var(--leftmenu) minmax(0,1fr);gap:var(--gap);align-items:start}
  .layout > .left-column{grid-column:1/2;display:flex;flex-direction:column;gap:8px}
  .layout > #left-menu,.layout > aside.left-menu{grid-column:1/2;align-self:stretch}
  .layout > article.content,.layout > .content{grid-column:2/-1}
  /* Ensure left-column reserves exact width and the menu fits inside it */
  .left-column { width: var(--leftmenu); box-sizing: border-box; }
  .left-column .left-menu { width: 100%; box-sizing: border-box; }
  /* .nav-mobile { display: none; }
  .nav-desktop { display: block; } */
  /* .layoutTools{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0px;align-items:start} */
  /* .tab{background-color: #e5ecf9;border-bottom:1px solid #36c;padding:0 1.5em;font-weight:bold;white-space:nowrap;font-family:"Montserrat,sans-serif";} */
}

/* Left-column container (holds toggle + left-menu when JS moves them) */
.left-column{grid-column:1/2;display:flex;flex-direction:column;gap:8px}
.left-column .left-menu-toggle{align-self:flex-start}

.left-column.collapsed{width:0 !important;height:0 !important;padding:0 !important;margin:0 !important;overflow:hidden;opacity:0;transition:all 180ms ease}

/* Left menu */
.left-menu{background:var(--left-bg);padding:12px;border-radius:4px}
/* .left-menu ul{list-style:none;padding:0;margin:0;line-height:1.6} */
.left-menu ul{list-style:none;padding:0;margin:0;line-height:1.0}
.left-menu li{margin:6px 0}
.left-menu a{color:#2b6aa3;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.left-menu a:hover{text-decoration:underline}
.left-menu.collapsed{width:0 !important;height:0 !important;padding:0 !important;margin:0 !important;overflow:hidden;opacity:0;transition:all 180ms ease}

/* Content */
/*.content{padding:0px 0px; margin-top:-12px; }*//*padding 12 top */
.content{padding:0px 0px; margin-top:0px; height: 100%;}/*padding 12 top */
.content{padding:0px 0px; margin-top:0px; height: 100%;width:100%;}/*padding 12 top */

/* Intro promo */
.intro {
    width: 100%; /* The table will be 100% of the body's width */
    margin: 0 auto; /* Center the container on the page */
    /*max-width: 750;*/ /* Optional: Prevent the table from getting too wide on large screens */
}
.intro .promo{max-width:240px;float:left;margin-right:12px;border-radius:4px}

/* Footer */
/* .site-footer{padding:14px 12px;background:#fafafa;border-top:1px solid #eee} */
.site-footer{padding:6px 0px;background:#fafafa;border-top:1px solid #eee;text-align: center;font-size: 10pt;line-height: 1;}
.footer-links a{color:var(--muted) !important;text-decoration:none;margin:0 6px;font-size: 10pt !important;}
/* .footer-links a:hover{color:var(--top-blue);text-align: center;} */
.footer-links a:hover{color:var(--top-blue);text-align: center;}

/* Utilities */
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Dropdown panels and bullets */

/* Dropdown basic appearance */
.dropdown{
  display:none; /* JS toggles inline display; CSS hover fallback shows with :hover */
  position:absolute;
  top:100%;
  left:0;
  /* background:var(--top-blue); */
  background:var(--top-blue);
  background: linear-gradient(180deg, var(--top-blue), #0e114f);
  background: linear-gradient(180deg, var(--trans-blue), var(--dark-blue));
  color:#fff;
  padding:8px;border-radius:4px;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  min-width:160px;white-space:nowrap;z-index:99999;pointer-events:auto;
}
.top-nav li{position:relative}
.top-nav li:hover>.dropdown, .top-nav li:focus-within>.dropdown{display:block}

/* Dropdown items */
.dropdown>div{padding:6px 8px}
.dropdown a{display:inline-flex;align-items:center;gap:0px;color:#fff;text-decoration:none;width:100%}
.dropdown a:hover{background:rgba(255,255,255,0.04);border-radius:3px}

/* Bullet images inserted by JS */
img.menu-bullet,img.left-bullet{width:10px;height:10px;vertical-align:middle;object-fit:contain}
img.menu-bullet{width:10px;height:10px;vertical-align:middle;object-fit:contain}
img.left-bullet{width:7px;height:10px;vertical-align:middle;object-fit:contain}

/* Spacer fallback ensures visible space if spacer.gif missing */
img[src$="spacer.gif"]{display:inline-block;min-width:10px;min-height:10px}

/* Prevent duplicate pseudo-bullets when an IMG bullet exists */
.top-nav a.has-bullet::before,
.left-menu a.has-bullet::before,
.top-nav a.has-bullet.hovering::before,
.left-menu a.has-bullet.hovering::before{
  content:none !important;
}

/* Pseudo-bullet shown only for anchors without real IMG bullets */
.top-nav a:not(.has-bullet):hover::before,
.top-nav a:not(.has-bullet).hovering::before,
.top-nav li:focus-within a:not(.has-bullet)::before{
  content:"";display:inline-block;width:10px;height:10px;margin-right:-10px;vertical-align:middle;
  background-image:url('../bimages/yellowbulletblue.gif');background-size:contain;background-repeat:no-repeat;
}

.left-menu a:not(.has-bullet):hover::before,
.left-menu a:not(.has-bullet).hovering::before{
  content:"";display:inline-block;width:7px;height:10px;margin-right:6px;vertical-align:middle;
  background-image:url('../bimages/yellowbullet.gif');background-size:contain;background-repeat:no-repeat;
}

/* Ensure pseudo-bullet for header links is suppressed when marked */
.top-nav a.no-header-bullet::before{content:none !important}

/* Overlay for technologies */
#tech-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;padding:24px;z-index:2000}
.tech-overlay-inner{background:#fff;max-width:900px;width:100%;max-height:80vh;overflow:auto;padding:18px;border-radius:6px;position:relative}
.tech-overlay-close{position:absolute;right:8px;top:8px;border:none;background:transparent;font-size:20px;cursor:pointer}

/* Left menu toggle behavior: collapsing the left column */
.site-wrapper.left-collapsed .layout,
body.left-collapsed .layout{
  grid-template-columns:0 minmax(0,1fr) !important;
  gap: var(--gap) !important;
}
/* defensive: keep left-column collapsed state explicit */
.left-column.collapsed,
.left-column.left-collapsed,
.left-column.left-collapsed .left-menu {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: all 180ms ease !important;
}
.left-menu{transition:width 240ms ease,padding 180ms ease,opacity 180ms ease}
.left-column .left-menu{width:100%}

/* When site-header toggle is moved into layout, hide the header copy */
.site-header .left-menu-toggle{display:none}

/* Defensive rules */
.left-menu{position:relative;z-index:2}
.dropdown{z-index:99999}

/* Legacy compatibility: ensure legacy wrapper grid uses minmax */
.site-wrapper.has-side{grid-template-columns:var(--leftmenu) minmax(0,1fr);grid-template-rows:auto 1fr auto}

/* Table normalization inside legacy content */
.site-wrapper.has-side .content table,
.site-wrapper.has-side .content td,
.site-wrapper.has-side .content th{width:100% !important;max-width:100% !important;margin:0 !important;padding:0 !important;box-sizing:border-box}

/* Accessibility / focus */
.dropdown a:focus{outline:2px solid rgba(255,255,255,0.12);outline-offset:2px;background:rgba(255,255,255,0.03);border-radius:3px}
/* .dropdown a:focus{outline:0px solid rgba(255,255,255,0.12);outline-offset:0px;background:rgba(255,255,255,0.03);border-radius:0px} */

/* Left-menu: overlay on small screens, inline on large screens */

/* Default: make left behave as overlay by default (JS will remove overlay class on large screens) */
.left-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--leftmenu);
  max-width: 85vw;
  background: #f7f7f7;
  box-shadow: 2px 0 12px rgba(0,0,0,0.25);
  transform: translateX(-110%);
  transition: transform 240ms ease-in-out;
  z-index: 2200;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
}
.left-overlay.open { transform: translateX(0); }

/* backdrop when overlay open */
body.left-menu-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.36);
  z-index: 2100;
  pointer-events: auto;
}

/* Make main content fill width by default */
.content, main, .main-content, article.content {
  width: 100% !important;
  box-sizing: border-box;
}

/* On large screens, keep left-menu inline (remove overlay behavior) 900px */
@media screen and (min-width: 750px) {
/* @media (min-width: 750px) { */
  .left-overlay {
    position: static !important;
    transform: none !important;
    width: var(--leftmenu);           /* desired left column width on desktop */
    max-width: none;
    box-shadow: none;
    transition: none;
    z-index: auto !important;
    overflow: visible;
    pointer-events: auto;
  }
  #left-menu{
    position: static !important;
    transform:none !important;
    visibility:visible !important;
    width: var(--leftmenu);
    max-width:none;
    z-index:auto !important;
    overflow:visible;
    transition:none;
    pointer-events: auto;
  }
  body.left-menu-open::before { 
    display: none !important;
    pointer-events: auto !important;
   }
  /* ensure layout places left column beside content; allow existing .layout rules to control spacing */
  .left-column { display: block; float: left; width: var(--leftmenu); box-sizing: border-box; }
  /* ensure main content does not sit behind backdrop */
  .content, main, article.content { margin-left: 0; box-sizing: border-box; }
}

/* Small screens: stack layout 879px 750px; change size to 749 to stop menu flicker */
@media screen and (max-width: 749px) {
/* @media (max-width:749px){ */
  .site-wrapper.has-side{display:block}
  .layout{display:block}
  .site-header{flex-wrap:wrap}
  .site-header .left-menu-toggle{display:inline-block}
  .site-header .logo-link{flex:0 0 auto}
  .left-column{display:block}
  /* .content{padding:0px 12px; margin-top:-12px; height: 100%;} */
  /* .content{padding:0px 12px; margin-top:0px; height: 100%;} */
  .content{padding:0px 0px; margin-top:0px; height: 100%;}
  /* .tab{background-color: #e5ecf9;border-bottom:1px solid #36c;padding:0 0.5em;font-weight:bold;white-space:nowrap;font-family:"Montserrat,sans-serif";} */

  /* Force tables with width attributes to shrink */
  /* table[width], table[width] * { box-sizing: border-box; max-width: 100% !important; width: 100% !important; } */

  /* Common IDs/classes used in legacy pages */
  /* #texttable, #submittable, #texttable table, #submittable table { max-width: 100% !important; width: 100% !important; } */

  /* Override inline styles that use fixed pixel widths */
  div[style*="width:749"], div[style*="width:749;"], div[style*="width:740"], div[style*="width:740;"],
  div[style*="width:750"], div[style*="width:750;"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Make images/tables fluid */
  /* img, .img-responsive { max-width: 100% !important; height: auto !important; display: block; } */

  /* Tabs / tabbars: allow wrapping rather than overflow */
  /* .tabbar, .tabbar table, .tab { box-sizing: border-box; width: 100% !important; } */
  /* .tab { white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; } */

  /* Prevent body-level horizontal overflow where possible */
  /* html, body { -webkit-text-size-adjust: 100%; } */

  /* @media only screen and (max-width:600px){select{width:200px!important;}} */
  input[type="text"],
  textarea {
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't exceed 100% */
    max-width: 100%;
  }
  /* to stop left menu flicker */
  #left-menu{
    position:fixed !important;
    top:0; left:0; bottom:0;
    width:var(--leftmenu);
    max-width:85vw;
    transform:translateX(-110%) translateZ(0);
    visibility:hidden;
    z-index:2200;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box;
    transition: transform .22s ease-in-out, visibility .01s linear .22s;
    pointer-events: auto;
  }
  #left-menu.open{
    transform:translateX(0) translateZ(0);
    visibility:visible;
    transition-delay:0s;
  }
  body.left-menu-open::before{
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.36);
    z-index:2100;
    pointer-events: auto;
  }
}

/* End of consolidated stylesheet */

/* Ensure header uses the dark top color so white nav links are visible 
  gap: 12px;
  padding: 10px 16px;*/
.site-header {
  display: flex;
  align-items: center;
  gap: 0px;
  padding: 0px 0px;
  background: linear-gradient(180deg, var(--top-blue), #0e114f);
  background: linear-gradient(180deg, var(--top-blue), var(--trans-blue));
  /* background: var(--top-blue); */
  color: #fff;
}

/* Guarantee top-nav links are white and visible on the header */
/* restore top-nav visuals (replace any debug overrides) */
#top-nav, .top-nav, .topnav { display: block; }
.topnav { display:flex; gap:8px; align-items:center; margin:0; padding:0; list-style:none; }
.topnav > li { list-style: none; position: relative; }
.topnav a, .top-nav a {
  color: #fff !important;
  background: transparent;
  padding: 6px 8px;
  border-radius: 4px;
  text-decoration: none;
}
.topnav a:hover, .top-nav a:hover,
.topnav a:focus, .top-nav a:focus {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
#top-nav { outline: none; }
/* Make sure the nav sits above other content */
#top-nav { z-index: 50; }

/* display nav below logo */
/* show logo image without filters and stack nav below logo */
/* .site-header { flex-direction: column; align-items: flex-start; padding: 12px 16px; } */
.site-header { flex-direction: column; align-items: flex-start; padding: 0px 0px; }
.site-header .logo-link { display:block; margin-bottom:8px; }
/* .logo { height:56px; width:auto; display:block; filter:none !important; opacity:1 !important; background: rgba(102,153,204);} */
/* .logo { height:auto; width:auto; display:block; filter:none !important; opacity:1 !important; background: rgba(102,153,204);} */
/* .logo { height:auto; width:auto; display:block; filter:none !important; opacity:1 !important; background: var(--top-blue);} */
/* .logo { height:auto; width:auto; display:block; filter:none !important; opacity:1 !important; background: linear-gradient(180deg, var(--top-blue), var(--trans-blue));} */

  /* background: linear-gradient(180deg, var(--trans-blue), var(--dark-blue)); */

/* ensure nav spans full width under the logo */
#top-nav, .topnav { width:100%; }
.topnav { justify-content:flex-start; flex-wrap:wrap; }

/* small style for date item */
.topnav .nav-date span { color:#fff; opacity:0.9; margin-right:6px; font-size:0.95rem; }

/* ensure Home has same nav styling */
.topnav li:first-of-type + li a,
.topnav li:nth-of-type(2) a { color:#fff; }
.topnav ul{list-style:none;padding:0;margin:0;line-height:1.0}


/* Small enhancements for legacy classes used in templates */
.menuleft{color:#5f8ac5}
/* .menuleftsel{color:red} */
.menuleftsel{color:red;font-size: 16px;}
/* .menutxt{color:#fff;font-weight:bold} */
/* .menutxt{color:#fff;font-weight:400} */
.menutxt{color:#fff;color:var(--muted);font-weight: normal;font-size: 16px;}
.menubottomindex{color:var(--muted)}

.left-menu a, .left-menu .menuleft { color: #2b6aa3; text-decoration: none; display: inline-flex; align-items:center; gap:8px; }
.left-menu a, .left-menu .menuleft { color: #2b6aa3; text-decoration: none; display: inline-flex; align-items:center; gap:2px; }
.left-menu a:hover, .left-menu a:focus { color: #111160; text-decoration: none; }

/* current-page bullet in left menu (JS adds redbullet.gif) */
/* .menuleftsel, .menuleftsel span { color: red; font-weight: bold; } */
.menuleftsel, .menuleftsel span { color: red; }

.left-heading { margin-top: -6px; }
.left-column { height: 100%; }
.left-menu { padding-top: 6px; padding-bottom: 6px; height: 100%; }

/* defensive: make sure nav is on top */
#top-nav { position: relative; z-index: 70; }

body {
  font-family: "Montserrat",sans-serif;
  /* font-size: 1rem; */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #727272;
  text-align: left;
  line-height: 1.86;
  color: #6a6a6a;
  max-width: 750px;
}
/* .normaltxt
{
  font-weight: normal;
  font-size: 10pt;
  color: #727272;
  font-style: normal;
  font-family: "Montserrat",sans-serif;
  text-decoration: none
} */
/* table {
  font-weight: normal;
  font-size: 10pt;
  color: #727272;
  font-style: normal;
  font-family: "Montserrat",sans-serif;
  text-decoration: none
} */
/* select {
  font-weight: normal;
  font-size: 10pt;
  color: #727272;
  font-style: normal;
  font-family: "Montserrat",sans-serif;
  text-decoration: none
} */

.selectclass {
  font-weight: normal;
  font-size: 16px;
  color: #727272;
  font-style: normal;
  font-family: "Montserrat",sans-serif;
  text-decoration: none
}

.normaltxt
{
  font-weight: normal;
  /* font-size: 10pt; */
  font-size: 16px;
  color: #727272;
  /* color: #c24a50; */
  font-style: normal;
  font-family: "Montserrat",sans-serif;
  text-decoration: none;
  line-height:1.0;
}

li {
  font-weight: normal;
  font-size: 16px;
  color: #727272;
  font-style: normal;
  font-family: "Montserrat",sans-serif;
}
.sectionhdrblkItalic
{
    FONT-WEIGHT: bolder;
    FONT-SIZE: 16px;
    COLOR: black;
    /* FONT-STYLE: normal; */
    FONT-STYLE: italic;
    FONT-FAMILY: "Montserrat",sans-serif;
    TEXT-DECORATION: none
}
tbody a:link {
    color:#6699CC;
  font-weight: normal;
  font-size: 16px;
}
a:link {
    color:#6699CC;
  font-weight: normal;
  font-size: 16px;
  text-decoration: none;
}
a:visited {
    color:#6699CC;
  font-weight: normal;
  font-size: 16px;
}
a:hover {
  color: red;
}
b {
    font-weight: bolder;
    color: #000000;
}
i {
    font-style: italic;
    color: #000000;
}
.center-container {
  text-align: center; /* Centers the <ul> block horizontally */
}
.center-container ul {
  display: inline-block; /* Allows the <ul> to be centered by text-align */
  padding: 0; /* Optional: Removes default left padding */
  /*text-align: left;*/ /* Optional: Aligns list item text to the left within the list block */
  margin: 0 auto; /* Ensures older browser compatibility for centering the block */
}
.center-all-text {
  text-align: center; /* Centers all content, including list items and bullets, within the td */
}
/* Optional: further styling to remove default list margins/padding */
.center-all-text ul {
    list-style-position: inside; /* Keeps the bullet point with the centered text */
    padding: 0;
    margin: 0;
}

.table-container {
    width: 100%; /* The table will be 90% of the body's width */
    margin: 0 auto; /* Center the container on the page */
    max-width: 750px; /* Optional: Prevent the table from getting too wide on large screens */
}

.responsive-table {
    width: 100%; /* This makes the table resize to the width of its parent container (.table-container) */
    border-collapse: collapse; /* Optional: Collapses borders into a single border */
    border: 0;
}

/* .responsive-table th, 
.responsive-table td { */
.responsive-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.responsive-table th {
    background-color: #f2f2f2;
}
.img-websoft {
    width: 145px;
    height: 45px;
    aspect-ratio: auto 145 / 45;
}