body {
  font-family: Helvetica, Tahoma, sans-serif;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

table.menubar {
  width: 100%;
  text-align: center;
  table-layout: fixed;
  overflow-wrap: break-word;
  font-size: 10pt;
  margin-top: 0em;
  padding: 0px;
}

table.menubar tr td {
  background-color: #eee;
  border: 1px solid darkgrey;
  hyphens: auto;
  vertical-align: middle;
  position: relative; /* Added for positioning the submenu */
}

table.menubar tr td a {
  color: black;
  text-decoration: none;
  display: inline-block;
  padding: 10px;
}

table.menubar tr td a:hover {
  text-decoration: underline;
}

.submenu {
  display: none;
  position: absolute;
  background-color: #eee;
  border: 1px solid darkgrey;
  z-index: 1; /* To appears above other elements */
}

table.menubar tr td:hover .submenu,
table.menubar tr td:focus-within .submenu {
  display: block;
}

.submenu a {
  display: block;
  padding: 10px;
}

.submenu a:hover {
  background-color: #ddd;
}

table.comparison {
  margin-top: 1em;
  text-align: left;
  border: none;
  table-layout: fixed;
  font-size: small;
  height: 100%;
}

table.comparison td {
  border: none;
  padding: 1px 1px;
  vertical-align: top;
  hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  text-align: center;
}

table.comparison tr td:first-child {
  text-align: left;
  white-space: nowrap;
  padding-right: 5px;
}

table.comparison th, table.comparison thead {
  border: none;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 10;
  background-color: white;
  font-weight: bold;
  text-align: center;
}

table.comparison tr>th:first-child, table.comparison tr>td:first-child, table.comparison td.legend, .firstcolumn {
  background-color: white;
}

table.comparison thead.sticky tr td {
  border-left: 1px solid lightgrey;
}

table.comparison td.line,
table.comparison td.green,
table.comparison td.lgreen,
table.comparison td.yellow,
table.comparison td.lred,
table.comparison td.red,
table.comparison td.dred,
table.comparison td.blue,
table.comparison td.blue2,
table.comparison td.grey,
table.comparison td.greyblue,
table.comparison td.purple,
table.comparison td.dropped,
table.comparison td.ext,
table.comparison td.yes,
table.comparison td.hidden,
table.comparison td.antifeature,
table.comparison td.notreally,
table.comparison td.mixed,
table.comparison td.almost,
table.comparison td.mktshare1,
table.comparison td.mktshare5,
table.comparison td.mktshare20,
table.comparison td.mktshare30,
table.comparison td.mktshare40,
table.comparison td.mktshare100,
table.comparison td.otherclients,
table.comparison td.mau0,
table.comparison td.mau1,
table.comparison td.mau2,
table.comparison td.mau3,
table.comparison td.mau4,
table.comparison td.mau5,
table.comparison td.mau6,
table.comparison td.extracolour1,
table.comparison td.extracolour2,
table.comparison td.no {
  border-top: 1px solid ivory;
  border-bottom: 1px solid ivory;
}

table.comparison td img {
  padding: 15px 0px;
}

.semititle {
  text-decoration: underline;
  font-weight: bold;
  vertical-align: bottom;
}

.legend {
  text-align: left;
  white-space: nowrap;
  padding-right: 5px;
}

.center {
  text-align: center;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 10;
  background-color: lightgrey;
  color: black;
}

.tooltip {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: darkred;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;
  position: absolute;
  z-index: 1;
  max-width: 300px;
  min-width: 150px;
  font-weight: normal;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

span.tooltiptext a {
  color: white;
}

.smaller {
  font-size: smaller;
}

.green, .yes {
  background-color: #CEE6BB;
}

.lgreen, .almost {
  background-color: #E7F2DD;
}

.yellow, .mixed, .hidden {
  background-color: #E7DEB1;
}

.lred, .notreally, .dropped {
  background-color: #F5E0D6;
}

.red, .no {
  background-color: #EBC1AD;
}

.dred  {
  background-color: #ff9494;
}

.blue, .otherclients {
  background-color: aliceblue;
}

.grey {
  background-color: lightgrey;
}

.purple {
  background-color: plum;
}

.blue2 {
  background-color: lightblue;
}

.greyblue {
  background-color: #B0C6CD;
}

.extracolour1 {
  background-color: tan;
}

.extracolour2 {
  background-color: darkkhaki;
}

.ext {
  background-color: #CAEAEE;
}

.antifeature {
  background-color: thistle;
}

@media (min-width: 578px){
  table.comparison tr>th:first-child, table.comparison tr>td:first-child, table.comparison td.legend {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
  }
}

@media all and (max-width: 760px) {
  table.menubar {
    display: block;
  }

  table.menubar tr {
    display: block;
  }

  table.menubar td {
    display: inline-block;
    width: 100%;
    padding: 10px;
    position: relative;
  }

  .submenu {
    position: static; /* Change to static for mobile */
    display: none;
  }

  table.menubar tr td:focus-within .submenu {
    display: block;
  }
}

@media (prefers-color-scheme: dark) {
  body, th {
    background-color: #222; color: white;
  }

  a, a:visited {
    color: lightblue;
  }

  table.comparison tr td a, table.comparison tr td a:visited {
    color: #333399;
  }

  .green, .lgreen, .yellow, .lred, .red, .dred, .blue, .blue2, .grey, .greyblue, .purple, .dropped, .ext, .yes, .hidden, .antifeature, .dropped, .no, .notreally, .mixed, .almost, .kdeapp, .gnomeapp, .mktshare1, .mktshare5, .mktshare20, .mktshare30, .mktshare40, .mktshare100, .otherclients, .mau0, .mau1, .mau2, .mau3, .mau4, .mau5, .mau6, .extracolour, .extracolour2 {
    color: black;
  }

  table.comparison tr.product td {
    border-color: #333;
    border: 1px solid lightgrey;
  }

  th, table.comparison tr>th:first-child, table.comparison tr>td:first-child, table.comparison td.legend, .firstcolumn, .sticky {
    background-color: #222;
    color: white;
  }

  table.comparison th, table.comparison thead {
    background-color: #222;
    color: white;
  }
}