html, body,
.leaflet-container,
.tablesorter-default {
  font-family: "Open Sans", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.dark-theme {
  scrollbar-color: rgb(255 255 255 / 40%) rgb(255 255 255 / 2%);
  scrollbar-width: thin;
  background-color: #1e1b1b;
}

/* commons */

.rounded-4px {
  border-radius: 4px !important;
}

.rounded-16px {
  border-radius: 16px !important;
}

.mono {
  font-family: Consolas, Menlo, ui-monospace, monospace !important;
}

.back-tooltip {
  transform: rotate(90deg);
}

/* icons new - hexagon */

.icon-hexagon {
  width: 26px;
  height: 26px;
  opacity: 0.94;
}

.dark-theme .icon-hexagon {
  opacity: 0.8;
}

.dark-theme .icon-hexagon-outer-future {
  opacity: 1;
}

.icon-hexagon:hover,
.icon-hexagon:focus,
.icon-hexagon:active {
  opacity: 1;
}

.icon-hexagon-outer {
  width: 30px;
  height: 30px;
}

/*.icon-hexagon .icon-hexagon-path1 {
  fill: #aaa;
  stroke: #fff;
  stroke-width: 4px;
  stroke-linejoin: round;

  -webkit-filter: url(#icon-hexagon-shadow);
          filter: url(#icon-hexagon-shadow);
}

.icon-hexagon .icon-hexagon-path2 {
  -webkit-transform: scale(.79) translate(7.6px, 7.5px);
      -ms-transform: scale(.79) translate(7.6px, 7.5px);
          transform: scale(.79) translate(7.6px, 7.5px);
}

.icon-hexagon-role-sensor .icon-hexagon-path1,
.icon-hexagon-role-sensor .icon-hexagon-path2 {
  fill: url(#gradient-role-sensor);
}
.icon-hexagon-role-tracker .icon-hexagon-path1,
.icon-hexagon-role-tracker .icon-hexagon-path2 {
  fill: url(#gradient-role-tracker);
}
.icon-hexagon-role-clientmute .icon-hexagon-path1,
.icon-hexagon-role-clientmute .icon-hexagon-path2 {
  fill: url(#gradient-role-clientmute);
}
.icon-hexagon-role-clienthidden .icon-hexagon-path1,
.icon-hexagon-role-clienthidden .icon-hexagon-path2 {
  fill: url(#gradient-role-clienthidden);
}
.icon-hexagon-role-client .icon-hexagon-path1,
.icon-hexagon-role-client .icon-hexagon-path2 {
  fill: url(#gradient-role-client);
}
.icon-hexagon-role-clientbase .icon-hexagon-path1,
.icon-hexagon-role-clientbase .icon-hexagon-path2 {
  fill: url(#gradient-role-clientbase);
}
.icon-hexagon-role-repeater .icon-hexagon-path1,
.icon-hexagon-role-repeater .icon-hexagon-path2 {
  fill: url(#gradient-role-repeater);
}
.icon-hexagon-role-routerlate .icon-hexagon-path1,
.icon-hexagon-role-routerlate .icon-hexagon-path2 {
  fill: url(#gradient-role-routerlate);
}
.icon-hexagon-role-router .icon-hexagon-path1,
.icon-hexagon-role-router .icon-hexagon-path2 {
  fill: url(#gradient-role-router);
}
.icon-hexagon-role-lostandfound .icon-hexagon-path1,
.icon-hexagon-role-lostandfound .icon-hexagon-path2 {
  fill: url(#gradient-role-lostandfound);
}
.icon-hexagon-role-unknown .icon-hexagon-path1,
.icon-hexagon-role-unknown .icon-hexagon-path2 {
  fill: url(#gradient-role-unknown);
}
.icon-hexagon-offline .icon-hexagon-path1,
.icon-hexagon-offline .icon-hexagon-path2 {
  fill: url(#gradient-role-offline);
}

.icon-hexagon-outer .icon-hexagon-path1 {
  fill: #fff;
  stroke: rgb(103 103 103 / 80%);
}

.icon-hexagon-outer-core .icon-hexagon-path1 {
  stroke: rgb(175 91 211 / 80%);
}*/

.icon-hexagon-outer-future {
  width: 26px;
  height: 26px;
  opacity: 1;
}

/*.icon-hexagon-outer-future .icon-hexagon-path1 {
  stroke: rgb(13 146 255 / 80%);
  stroke-width: 5px;
  fill: transparent;

  -webkit-filter: url(#icon-hexagon-shadow-small);
          filter: url(#icon-hexagon-shadow-small);
}

.icon-hexagon-outer-future .icon-hexagon-path2 {
  stroke: rgb(13 146 255 / 80%);
  fill: transparent;
}*/

.icon-hexagon-legend {
  opacity: 1;
  margin-right: 5px;
  width: 20px;
  height: 20px;
  cursor: default !important;
}

.dark-theme .icon-hexagon-legend {
  opacity: 0.85;
}

/*.icon-hexagon-legend .icon-hexagon-path1 {
  -webkit-filter: url(#icon-hexagon-shadow-xsmall);
          filter: url(#icon-hexagon-shadow-xsmall);
}

.icon-hexagon-legend.icon-hexagon-outer-core .icon-hexagon-path1,
.icon-hexagon-legend.icon-hexagon-outer-future .icon-hexagon-path1 {
  stroke-width: 6px;
}*/

/* icons old */

.icon-base {
  opacity: 0.92;
  border-radius: 26px;
  border: 2px solid #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.7);
}

.icon-base:hover {
  opacity: 1;
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.7);
}

.icon-base-legend {
  opacity: 1;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: auto;
  margin-bottom: auto;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
}

.icon-mqtt-connected    { background-color: rgb(81 183 23); }
.icon-position-history  { background-color: #a855f7; }

.icon-node-role-sensor        {
  background-color: rgb(95 166 235);
  /*background-color: rgb(85 155 223);
  background: linear-gradient(to bottom, rgb(102 172 239) 0%, rgb(85 155 223) 100%);*/
}
.icon-node-role-tracker       {
  background-color: rgb(77 181 209);
  /*background-color: rgb(61 160 187);
  background: linear-gradient(to bottom, rgb(91 184 223) 0%, rgb(61 160 187) 100%);*/
}
.icon-node-role-clienthidden  {
  background-color: rgb(77 203 154);
  /*background-color: rgb(58 177 131);
  background: linear-gradient(to bottom, rgb(74 195 148) 0%, rgb(58 177 131) 100%);*/
}
.icon-node-role-clientmute    {
  background-color: rgb(71 193 145);
  /*background-color: rgb(35 177 122);
  background: linear-gradient(to bottom, rgb(52 201 143) 0%, rgb(35 177 122) 100%);*/
}
.icon-node-role-client        {
  background-color: rgb(99 183 50);
  /*background-color: rgb(70 175 11);
  background: linear-gradient(to bottom, rgb(75 205 39) 0%, rgb(70 175 11) 100%);*/
}
.icon-node-role-clientbase    {
  background-color: rgb(151 187 26);
  /*background-color: rgb(138 173 18);
  background: linear-gradient(to bottom, rgb(159 199 21) 0%, rgb(138 173 18) 100%);*/
}
.icon-node-role-repeater      {
  background-color: rgb(231 146 66);
  /*background-color: rgb(225 138 55);
  background: linear-gradient(to bottom, rgb(231 164 50) 0%, rgb(225 138 55) 100%);*/
}
.icon-node-role-routerlate    {
  background-color: rgb(231 119 96);
  /*background-color: rgb(229 107 82);
  background: linear-gradient(to bottom, rgb(255 105 105) 0%, rgb(229 107 82) 100%);*/
}
.icon-node-role-router        {
  background-color: rgb(219 98 123);
  /*background-color: rgb(221 75 105);
  background: linear-gradient(to bottom, rgb(233 107 107) 0%, rgb(221 75 105) 100%);*/
}
.icon-node-role-lostandfound  {
  background-color: rgb(209 102 207);
  /*background-color: rgb(195 83 193);
  background: linear-gradient(to bottom, rgb(221 92 219) 0%, rgb(195 83 193) 100%);*/
}
.icon-node-role-unknown       {
  background-color: rgb(171 148 229);
  /*background-color: rgb(161 138 219);
  background: linear-gradient(to bottom, rgb(177 154 235) 0%, rgb(161 138 219) 100%);*/
}

.icon-offline                 {
  background-color: rgb(173 170 170);
  /*background-color: rgb(155 153 153);
  background: linear-gradient(to bottom, rgb(177 177 177) 0%, rgb(155 153 153) 100%);*/
}

/*.icon-node-core               { outline: 2px solid rgb(229, 126, 100); }
.icon-node-future             {
  background-color: transparent;
  border: 2px solid rgb(168, 94, 237);
  outline: 1px solid #fff;
}

.icon-node-core.icon-base-legend {
  width: 12px;
  height: 12px;
  margin-left: 2px;
  margin-right: 6px;
}

.icon-node-core.icon-node-future {
  width: 14px;
  height: 14px;
  margin-left: 1px;
}*/

.icon-mqtt-disconnected::after {
  content:"!";
  position: relative;
  display: block;
  color: #fff;
  opacity: 1;
  font-weight: 700;
  font-size:14px;
  font-family: monospace;
  vertical-align: middle;
  text-align: center;
  right: 0;
  left: 0;
  top: -25px;
  text-shadow: -1px -1px 1px rgba(0,0,0,0.09), 1px -1px 1px rgba(0,0,0,0.09), -1px 1px 1px rgba(0,0,0,0.09), 1px 1px 1px rgba(0,0,0,0.09);
  transform: scaleY(0.7);
}

.legend-box .icon-mqtt-disconnected::after {
  position: absolute;
  right: auto;
  left: auto;
  top: auto;
  margin-left: 6px;
  margin-top: -1px;
}

.icon-mqtt-outer.icon-mqtt-disconnected::after {
  top: -27px;
}

/* Header */

.header-box {
  position: fixed;
  z-index: 1001;
  width: 100%;
  height: 70px;
  margin-bottom: 70px;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.2);
  border: none;
  padding: 0.7rem;
}

.dark-theme .header-box {
  background-color: #1e1b1b;
  color: rgb(255 255 255 / 80%);
}

.header-logo {
  display: inline-block;
  width: 48px;
  height: 48px;
  background-color: transparent;
  background-image: url("/images/favicons/android-chrome-512x512.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.dark-theme .header-logo {
  background-image: url("/images/favicons/android-chrome-512x512-dark.png")
}

.header-title-box {
  margin-right: 1rem;
}

.header-title {
  font-size: 1rem; /* 1.5rem */
  /*line-height: 1.55rem;*/
  color: rgba(0,0,0,0.9);
}

.header-search-box {
  max-width: 540px;
  margin-left: 0;
  padding-right: 0;
  padding-left: 1rem;
}

.header-search-box-expanded {
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 2rem;
}

.header-search-box input {
  box-shadow: inset 1px 2px 3px rgba(0, 0, 0, 0.07);
}

.dark-theme .header-search-box input {
  background-color: rgb(255 255 255 / 20%);
  color: rgb(255 255 255 / 85%);
  border-color: rgb(255 255 255 / 4%);
}

.dark-theme .header-search-box input::placeholder {
  color: rgb(255 255 255 / 60%);
}

.header-search-dropdown {
  border: none;
}

.header-search-dropdown-item {
  border-color: rgb(255 255 255 / 10%) !important;
}

.header-search-dropdown-item:hover {
  background-color: rgb(30 27 27 / 4%);
}

.header-search-dropdown-title {
  color: rgb(17 24 39 / 100%);
}

.dark-theme .header-search-dropdown-item:hover {
  background-color: rgb(255 255 255 / 10%);
  color: rgb(255 255 255 / 100%);
}

.dark-theme .header-search-dropdown {
  background-color: #1e1b1b;
  color: rgb(255 255 255 / 85%);
}

.dark-theme .header-search-dropdown-title {
  color: rgb(255 255 255 / 85%);
}

/* */

.legend-container {
  border-radius: 16px;
  padding: 20px 12px 12px 12px;
  background-color: #fff;
}

.dark-theme .legend-container {
  background-color: #1e1b1b;
  color: rgb(255 255 255 / 80%);
}

.legend-box-title {
  min-width: 130px;
  margin: -10px 0 0 0;
}

.legend-box {
  display: block;
  margin: 6px 0 0 0;
}

.legend-box_minimized {
  display: none;
}

/* */

.waypoint-label {
  font-size: 26px;
  background-color: transparent;
}

.link {
  color: #2563eb;
}

.link:hover {
  text-decoration: underline;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltip-text {
  visibility: hidden;
  width: 110px;
  background-color: rgba(0,0,0,0.8);
  color: #fff;
  text-align: center;
  padding: 4px 10px;
  border-radius: 6px;
  position: absolute;
  z-index: 10000;
  top: 100%;
  left: 50%;
  margin-top: 6px;
  margin-left: -55px; /* Use half of the width (120/2 = 60), to center the tooltip */
  font-size: 14px;
}

.tooltip .tooltip-text::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent rgba(0,0,0,0.8) transparent;
}

.header-buttons-box .tooltip:last-child .tooltip-text {
  margin-left: -70px;
}

.header-buttons-box .tooltip:last-child .tooltip-text:after {
  margin-left: 15px;
}

.tooltip-window {
  background-color: #fff;
  border-radius: 16px;
  border: none;
}

.tooltip-window div {
  border-color: rgb(229, 231, 235);
}

.dark-theme .tooltip-window {
  background-color: #1e1b1b;
  color: rgb(255 255 255 / 80%);
}

.dark-theme .tooltip-window div {
  border-color: rgb(255 255 255 / 20%);
}

.dark-theme .text-input {
  background-color: rgb(255 255 255 / 20%);
  color: rgb(255 255 255 / 85%);
  border-color: rgb(255 255 255 / 4%);
}

.dark-theme select.text-input option {
  background-color: rgb(30 27 27 / 90%);
}

.dark-theme .text-gray-900 {
  color: #b1b1b1;
}

.dark-theme .text-blue-700 {
  color: #7195ff;
}

.dark-theme .text-gray-700 {
  color: #989ca1;
}

.dark-theme .text-gray-600 {
  color: #83888f;
}

.info-intro-important {
  color: #1e1b1b;
}

.round-button {
  border-radius: 9999px;
  padding: 0.5rem;
  background-color: #fff;
  color: rgb(30 27 27 / 90%);
}

a.round-button,
a.round-button:visited,
a.round-button:hover {
  padding: 0;
  color: rgb(30 27 27 / 90%);
}

.header-box a.round-button {
  padding: 0.5rem;
}

.round-button:hover {
  background-color: rgb(30 27 27 / 4%);
}

.dark-theme .round-button {
  color: rgb(255 255 255 / 80%);
  background-color: transparent;
}

.dark-theme .round-button:not(.round-button_fill) svg {
  stroke: rgb(255 255 255 / 80%);
}

.dark-theme .round-button_fill svg,
.dark-theme .round-button_fill img {
  fill: #aaa;
}

.dark-theme .round-button:hover {
  background-color: rgb(255 255 255 / 10%);
  color: rgb(255 255 255 / 100%);
}

.rect-button {
  cursor: pointer;
  border-radius: 4px;
  /*background-color: #fff;*/
}

.device-details-section .rect-button {
  background-color: #fff;
}

.rect-button:hover {
  background-color: rgb(30 27 27 / 4%);
}

.dark-theme .rect-button,
.dark-theme .device-details-section .rect-button {
  border-color: rgb(255 255 255 / 50%);
  background-color: transparent;
}

.dark-theme select.rect-button option {
  background-color: rgb(30 27 27 / 90%);
}

.dark-theme .rect-button:hover,
.dark-theme .device-details-section .rect-button:hover {
  background-color: rgb(255 255 255 / 10%);
  color: rgb(255 255 255 / 100%);
}

.header-auto-reload-box {
  margin-right: 0.5rem;
}

.header-auto-reload {
  position: relative;
  top: -1px;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
}

.dark-theme .device-details-section {
  background-color: rgb(255 255 255 / 10%);
}

/* leaflet customs */

.leaflet-tile-pane {
  
}

.leaflet-tile-pane_grayscale {
  filter: grayscale(60%);
}

.dark-theme .leaflet-tile-pane {
  filter: brightness(50%);
}

.leaflet-marker-icon:hover {
  /*z-index: 1000 !important;*/
}

.leaflet-control-layers {
  /*border-radius: 16px;*/
}

.leaflet-verticalcenter,
.leaflet-verticaltop {
  position: absolute;
  z-index: 999;
  pointer-events: none;
  top: 50%; /* possible because the placeholder's parent is the map */
  transform: translateY(-50%); /* using the CSS3 Transform technique */
  padding-top: 10px;
}

.leaflet-verticaltop {
  top: 17%;
}

@media only all and (max-height: 780px) {
  .leaflet-verticaltop {
    top: 22%;
  }
}

@media only all and (max-height: 580px) {
  .leaflet-verticaltop {
    top: 30%;
  }
}

.leaflet-verticalcenter .leaflet-control,
.leaflet-verticaltop .leaflet-control {
  margin-bottom: 10px;
}

.leaflet-center {
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 999;
}

.leaflet-bottom {
  z-index: 998;
}

.leaflet-tooltip {
  border: none;
  padding: 15px;
  border-radius: 16px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.45);
}

.leaflet-popup {
  border-radius: 16px;
}

.leaflet-popup-content-wrapper {
  border-radius: 5px;
}

.dark-theme .leaflet-tooltip,
.dark-theme .leaflet-popup,
.dark-theme .leaflet-popup-content-wrapper {
  background-color: #1e1b1b;
  color: rgb(255 255 255 / 80%);
}

.dark-theme .leaflet-tooltip-left:before {
  border-left-color: #1e1b1b;
}

.dark-theme .leaflet-tooltip-right:before {
  border-right-color: #1e1b1b;
}

.leaflet-bottom.leaflet-right .leaflet-control-layers {
  bottom: 50px;
}

.leaflet-top.leaflet-left {
  height: 100%;
}

.leaflet-control-layers-selector {
  margin-top: 0;
  margin-bottom: 5px;
}

.leaflet-control-layers-expanded {
  padding: 10px 12px 0px 12px;
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
  border: none;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.45);
}

.leaflet-touch .leaflet-bar a:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.leaflet-touch .leaflet-bar a:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
  font-size: 18px;
  font-weight: 500;
  border: none;
}

.leaflet-touch .leaflet-control-zoom {
  margin-right: 15px;
}

.circle-position-precision {
  fill-opacity: 0.4;
  stroke-opacity: 0.4;
  stroke-width: 1;
}

.circle-position-precision:hover {
  fill-opacity: 0.5;
  stroke-opacity: 0.5;
}

.dark-theme .leaflet-right .leaflet-control {
  opacity: 0.85;
}

.dark-theme .leaflet-right .legend-container {
  opacity: 1;
}

/* Map */

#map {
  margin-top: 70px;
}

/* Chat */

.chat-box-container {
  overflow: hidden;
  height: 97%;
  min-width: 200px;
  background-color: #fff;
  padding: 12px 12px 20px 12px;
  border-radius: 16px;
}

@media only all and (max-height: 780px) {
  .chat-box-container {
    height: 95%;
  }
}
@media only all and (max-height: 580px) {
  .chat-box-container {
    height: 92%;
  }
}

.chat-box-container_minimized {
  height: auto;
}

.dark-theme .chat-box-container {
  background-color: #1e1b1b;
  color: rgb(255 255 255 / 80%);
}

.chat-box {
  max-width: 500px;
  overflow-y: auto;
  font-size: 12px;

  height: 100%;
  position: relative;
  border-top: 80px solid transparent;
  top: -80px;
}

@media only all and (max-width: 1500px) {
  .chat-box {
    max-width: 400px;
  }
}
@media only all and (max-width: 1024px) {
  .chat-box {
    max-width: 290px;
  }
}
@media only all and (max-width: 680px) {
  .chat-box {
    max-width: 180px;
  }
}

.chat-box-container_minimized .chat-box {
  display: none;
}

.chat-box-stat {
  min-width: 230px;
  margin: 0;
  padding: 0 0 10px 0;
  line-height: 18px;
  border-bottom: 1px dashed rgba(0,0,0,0.3);
  color: rgba(0,0,0,0.85);

  position: relative;
  z-index: 2;
}

@media only all and (max-width: 1024px) {
  .chat-box-stat {
    min-width: 150px;
  }
}

.chat-box-container_minimized .chat-box-stat {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.dark-theme .chat-box-stat {
  color: rgb(255 255 255 / 85%);
}

.chat-box-header {
  padding: 5px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
  margin-bottom: 10px;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.02);
  text-align: center;

  position: relative;
  z-index: 2;
}

.chat-box-container_minimized .chat-box-header {
  display: none;
}

.dark-theme .chat-box-header {
  background-color: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 20%);
}

.chat-entry-date {
  margin: 12px 0 7px 0;
  border-radius: 4px;
  background-color: #ecf0f5;
  text-align: center;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: bold;
  color: rgba(0,0,0,0.85);
}

.dark-theme .chat-entry-date {
  background-color: rgb(255 255 255 / 10%);
  color: rgb(255 255 255 / 80%);
}

.chat-entry-node,
.chat-entry-msg {
  line-height: 15px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  word-break: break-word;
}

.chat-entry-msg_bold {
  font-weight: bold;
}

.chat-entry-node-new {
  color: #2453dd;
}

.dark-theme .chat-entry-node-new {
  color: #7195ff;
}

.chat-entry-time {
  color: rgba(0,0,0,0.6);
}

.dark-theme .chat-entry-time {
  color: rgb(255 255 255 / 60%);
}

.node-short-name[data-node-info] {
  cursor: pointer;
}

.node-short-name {
  display: inline-block;
  border-radius: 4px;
  padding: 1px 4px;
  margin: 1px 0;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 0 2px rgba(0,0,0,0.3);
}

.dark-theme .node-short-name {
  opacity: 0.85;
}

.chat-entry-node .node-short-name,
.chat-entry-msg .node-short-name,
.node-short-name.mono {
  letter-spacing: 0.07em;
}

.node-list-box .node-short-name,
.leaflet-tooltip .node-short-name {
  font-size: 14px;
  line-height: 20px;
  padding-left: 5px;
  padding-right: 5px;
}

.node-list-box .node-short-name {
  padding-top: 0;
  padding-bottom: 0;
}

.node-short-name_small,
.leaflet-tooltip .node-short-name_small {
  font-size: 11px;
  line-height: 16px;
  padding: 0 4px;
}

.leaflet-tooltip .node-short-name {
  padding-top: 0;
  padding-bottom: 0;
}

.node-short-name_big13 {
  padding: 3px 5px 1px 5px;
}

.node-short-name_big16 {
  padding: 0 5px 1px 5px;
  line-height: 22px;
  letter-spacing: 0.04em !important;
}

.node-short-name_search {
  padding: 1px 7px 3px 7px;
  line-height: 18px;
  font-weight: 600;
}

/* Node List */

.node-list-box {
  width: 100%;
  font-size: 12px;
  position: relative;
  z-index: 9;
  padding-top: 1px;
}

.node-list-table {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font-size: 12px;
}

.node-list-table th,
.node-list-table thead td {
  position: sticky;
  top: 0;
  text-align: left;
  line-height: 14px;
  padding: 9px 6px !important;
  vertical-align: middle !important;
}

.node-list-table th:hover {
  background-color: #f7f7f7;
}

.dark-theme .node-list-table th,
.dark-theme .node-list-table thead td {
  background-color: rgb(30 27 27 / 90%);
  color: rgb(255 255 255 / 95%);
}

.dark-theme .node-list-table th:hover {
  background-color: rgb(30 27 27 / 80%);
}

.node-list-table tbody td {
  text-align: left;
  line-height: 15px;
  padding: 4px 6px !important;
  vertical-align: middle !important;
}

.node-list-table tbody td {
  border-bottom-color: #efefef;
}

.node-list-table tbody tr.odd > td {
  background-color: #f9f8f8;
}

.node-list-table tbody tr.even > td {
  background-color: #fdfdfd;
}

.dark-theme .node-list-table tbody td {
  border-bottom-color: #434141;
}

.dark-theme .node-list-table tbody tr.odd > td {
  background-color: rgb(30 27 27 / 75%);
  color: rgb(255 255 255 / 80%);
}

.dark-theme .node-list-table tbody tr.even > td {
  background-color: rgb(30 27 27 / 80%);
  color: rgb(255 255 255 / 80%);
}

.dark-theme .node-list-table tbody > tr:hover > td, 
.dark-theme .node-list-table tbody > tr.even:hover > td, 
.dark-theme .node-list-table tbody > tr.odd:hover > td {
  background-color: rgb(30 27 27 / 85%);
  color: rgb(255 255 255 / 100%);
}

/* */

.city-dropdown-container {
  max-width: 400px;

  position: relative;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 14px;
  line-height: 20px;
}

.city-dropdown {
  max-height: 590px;
  min-width: 300px;

  position: absolute;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: #fff;
  box-shadow: 0 4px 20px rgb(0 0 0 / 20%);
  border-radius: 15px;
  margin: 0;
  padding: 15px 0 12px 0;

  display: none;
}

.dark-theme .city-dropdown {
  background-color: #1e1b1b;
  box-shadow: 0 4px 20px rgb(255 255 255 / 15%);
}

.city-dropdown-header {
  display: flex;
  flex-direction: row;
  display: inline-block;
}

.city-quantity { /* 1-9 nodes */
  display: inline-block;
  border-radius: 5px;
  padding: 2px 10px;
  margin: auto 10px auto 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  color: rgb(35 33 33 / 85%);
  background-color: rgb(144 144 144 / 20%);
  min-width: 30px;
  text-align: center;
}

.dark-theme .city-quantity {
  color: rgb(255 255 255 / 85%);
}

.city-dropdown-header .city-quantity {
  font-size: 14px;
  line-height: 22px;
}

@media only all and (max-width: 680px) {
  .city-dropdown-header .city-quantity {
    display: none;
  }
}

.city-quantity_blue { /* 10-29 */
  background-color: rgb(99 160 216 / 20%);
}
.city-quantity_green { /* 30-99 */
  background-color: rgb(80 186 127/ 20%);
}
.city-quantity_yellow { /* 100-399 */
  background-color: rgb(199 169 0 / 20%);
}
.city-quantity_orange { /* 400-999 */
  background-color: rgb(193 119 13 / 20%);
}
.city-quantity_red { /* more 1000 */
  background-color: rgb(188 57 17 / 20%);
}

.dark-theme .city-quantity_blue { /* 10-29 */
  background-color: rgb(99 160 216 / 80%);
}
.dark-theme .city-quantity_green { /* 30-99 */
  background-color: rgb(80 186 127/ 80%);
}
.dark-theme .city-quantity_yellow { /* 100-399 */
  background-color: rgb(199 169 0 / 80%);
}
.dark-theme .city-quantity_orange { /* 400-999 */
  background-color: rgb(193 119 13 / 80%);
}
.dark-theme .city-quantity_red { /* more 1000 */
  background-color: rgb(188 57 17 / 80%);
}

.city-title {
  display: flex;
  flex-direction: column;
}

.city-title-label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  padding: 0;
  margin: 0;
}

.city-dropdown-header .city-title-label {
  font-size: 18px;
  line-height: 20px;
  font-weight: 700;
}

.city-title-topic {
  font-family: Consolas, Menlo, ui-monospace, monospace !important;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  color: rgb(35 33 33 / 50%);
  padding: 0;
  margin: 0;
}

.dark-theme .city-title-topic {
  color: rgb(255 255 255 / 50%);
}

.city-title-shevron {
  padding: 3px 0 0 6px;
}

.city-title-shevron-svg {
  width: 16px;
  height: 16px;
}

.city-title-shevron-path {
  stroke: rgb(35 33 33 / 80%);
}

.dark-theme .city-title-shevron-path {
  stroke: rgb(255 255 255 / 80%);
}

.city-dropdown-search {
  padding: 0 20px 10px 20px;
}

.city-search {
  border: 1px solid rgb(35 33 33 / 15%);
  box-shadow: inset 0 1px 3px rgb(35 33 33 / 10%);
  border-radius: 5px;
  height: 36px;
  line-height: 40px;
  padding: 0 15px;
  width: 100%;
  font-size: 14px;
}

.city-search:active,
.city-search:focus {
  outline-color: rgb(0 132 238);
  outline: none;
}

.dark-theme .city-search {
  background-color: rgb(255 255 255 / 20%);
  color: rgb(255 255 255 / 85%);
  border-color: transparent;
}

.dark-theme .city-search::placeholder {
  color: rgb(255 255 255 / 60%);
}

.city-dropdown-box {
  overflow: auto;
  overflow-x: none;
  overflow-y: scroll;
  flex-grow: 1;
}

.city-dropdown-list {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.city-item {
  display: inline-block;
  flex-shrink: 0;
}

.city-item_empty {
  display: none;
}

.city-item_type-city {

}

.city-item_type-project {

}

.city-dropdown-list :nth-child(1 of .city-item_type-project) {
  margin-top: 15px;
}

.city-item-action {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  padding: 5px 20px;
}

.city-item-action,
.city-item-action:hover,
.city-item-action:active,
.city-item-action:focus {
  text-decoration: none;
}

.city-item-action:hover {
  background-color: rgb(35 33 33 / 4%);
}

.dark-theme .city-item-action:hover {
  background-color: rgb(255 255 255 / 24%);
}

.city-dropdown-header .city-item-action {
  border-radius: 15px;
}

.city-dropdown-header .city-item-action:hover {
  background-color: transparent;
}

@media only all and (max-width: 680px) {
  .city-dropdown-header .city-item-action {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.city-dropdown-header .city-title-label {
  font-size: 18px;
  font-weight: 700;
}

.city-item-action .city-title-label {
  color: rgb(35 33 33 / 95%);
}

.city-item-action:hover .city-title-label {
  color: rgb(35 33 33 / 100%);
}

.city-item_type-project .city-item-action .city-title-label {
  color: rgb(2 163 134 / 95%);
}

.city-item_type-project .city-item-action:hover .city-title-label {
  color: rgb(2 163 134 / 100%);
}


.city-item-action:hover .city-title-topic {
  color: rgb(35 33 33 / 80%);
}

.city-item-action:hover .city-quantity {
  color: rgb(35 33 33 / 100%);
}

.dark-theme .city-item-action .city-title-label {
  color: rgb(255 255 255 / 95%);
}

.dark-theme .city-item-action:hover .city-title-label {
  color: rgb(255 255 255 / 100%);
}

.dark-theme .city-item_type-project .city-item-action .city-title-label {
  color: rgb(35 231 196 / 95%);
}

.dark-theme .city-item_type-project .city-item-action:hover .city-title-label {
  color: rgb(35 231 196 / 100%);
}

.dark-theme .city-item-action:hover .city-title-topic {
  color: rgb(255 255 255 / 80%);
}

.dark-theme .city-item-action:hover .city-quantity {
  color: rgb(255 255 255 / 100%);
}

.city-dropdown-footer {
  text-align: center;
  font-size: 14px;
  padding: 10px 0 0 0;
}

/* */

.z-search {
  z-index: 1001;
}

.z-sidebar {
  z-index: 1002;
}

@keyframes opacityFlickering {
  0% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.9;
  }
}

.animation-flicker {
  animation: opacityFlickering 2s infinite linear;
}

.show-1024-inline,
.show-790-inline,
.show-680-inline {
  display: none;
}

@media only all and (max-width: 1500px) {
  .hide-1500  {
    display: none;
  }
}

@media only all and (max-width: 1500px) {
  .hide-1500  {
    display: none;
  }
}

@media only all and (max-width: 1024px) {
  .hide-1024  {
    display: none;
  }

  .show-1024-inline  {
    display: inline;
  }
}

@media only all and (max-width: 860px) {
  .hide-860  {
    display: none;
  }

  .show-860-inline  {
    display: inline;
  }
}

@media only all and (max-width: 790px) {
  .hide-790  {
    display: none;
  }

  .show-790-inline  {
    display: inline;
  }
}

@media only all and (max-width: 680px) {
  .hide-680  {
    display: none;
  }

  .show-680-inline  {
    display: inline;
  }
}