table.datatable>th, td {
    text-align: left;
  }

  td.wrap {
    white-space: normal!important;
    word-wrap: break-word;
  }

  .f32 .flag {
    vertical-align: middle;
    margin: -8px 0;
  }

  progress {
    width: 100%;
  }

  /*NETWORK TOGGLE*/

.switch {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(0, 192, 147);/*#2ab934;*/
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 5px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 5px;
}

input:checked + .slider {
background-color: #2196F3;
}

input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(85px);
}

/* showOfflineNodesCheck */
div:has(> #showOfflineNodesCheck), div:has(> #showOfflineNodesCheck) > * {
  cursor: pointer;
}

/*------ ADDED CSS ---------*/
.on
{
display: none;
}

.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}

input:checked+ .slider .on
{display: block;}

input:checked + .slider .off
{display: none;}

/*--------- END --------*/

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;}

#dashInfoDiv div.blob {
  width: 7px;
  height: 7px;
}

table.dataTable.dtr-column>tbody>tr>td.ccontrol,
table.dataTable.dtr-column>tbody>tr>th.ccontrol {
  position: relative!important;
}
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before,
table.dataTable.dtr-column>tbody>tr.parent>td.ccontrol:before,
table.dataTable.dtr-column>tbody>tr.parent>th.ccontrol:before {
  background-color: initial!important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr.online>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.online>th.dtr-control:before,
table.dataTable.dtr-column>tbody>tr.online>td.ccontrol:before,
table.dataTable.dtr-column>tbody>tr.online>th.ccontrol:before {
  background-color: /*#31b131*/rgb(0, 192, 147)!important;
}
table.dataTable.dtr-inline.collapsed>tbody>tr.offline>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.offline>th.dtr-control:before,
table.dataTable.dtr-column>tbody>tr.offline>td.ccontrol:before,
table.dataTable.dtr-column>tbody>tr.offline>th.ccontrol:before {
  background-color: /*#d33333*/rgba(255, 82, 82, 1)!important;
}
table.dataTable.dtr-inline.collapsed>tbody>tr.unsync>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.unsync>th.dtr-control:before,
table.dataTable.dtr-column>tbody>tr.unsync>td.ccontrol:before,
table.dataTable.dtr-column>tbody>tr.unsync>th.ccontrol:before {
  background-color: #eed202!important;
}
table.dataTable.dtr-inline.collapsed>tbody>tr.unknown>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.unknown>th.dtr-control:before,
table.dataTable.dtr-column>tbody>tr.unknown>td.ccontrol:before,
table.dataTable.dtr-column>tbody>tr.unknown>th.ccontrol:before {
  background-color: #ee8802!important;
}
table.dataTable.dtr-column>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-column>tbody>tr>th.dtr-control:before,
table.dataTable.dtr-column>tbody>tr>td.ccontrol:before,
table.dataTable.dtr-column>tbody>tr>th.ccontrol:before {
  top: 50%;
  left: 50%;
  height: 1.3em;
  width: 1.3em;
  margin-top: -0.65em;
  margin-left: -0.5em;
  display: block;
  position: absolute;
  color: white;
  /* border: 0.15em solid white; */
  border-radius: 1em;
  /*box-shadow: 0 0 0.2em #444;*/
  box-sizing: content-box;
  text-align: center;
  text-indent: 0 !important;
  line-height: 1.4em;
}
table.dataTable.dtr-column>tbody>tr td.dtr-control:before,
table.dataTable.dtr-column>tbody>tr th.dtr-control:before,
table.dataTable.dtr-column>tbody>tr td.ccontrol:before,
table.dataTable.dtr-column>tbody>tr th.ccontrol:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f054"!important;
}
table.dataTable.dtr-column>tbody>tr.parent td.dtr-control:before,
table.dataTable.dtr-column>tbody>tr.parent th.dtr-control:before,
table.dataTable.dtr-column>tbody>tr.parent td.ccontrol:before,
table.dataTable.dtr-column>tbody>tr.parent th.ccontrol:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f078"!important;
}

#nodeTab {
  padding: 0!important;
}
table.dataTable>thead>tr>th, table.dataTable>tbody>tr>td {
  padding: 11px 10px;
}
#nodeTable_length {
  padding-left: 20px;
}
#nodeTable_filter {
  padding-right: 20px;
}

#tableControlPanel {
  min-height:50px;
  font-size: 12px;
  border-bottom: 2px solid #ccc!important;
}
.dark-mode #nodeTab #tableControlPanel {
  border-bottom: 2px solid #2D313C!important;
}

/*#nodeTable td.name-cell:hover .bookmark-btn {
  display: block!important;
  float: right;
}

#nodeTable td.name-cell .bookmark-btn:hover {
  color: #d3c667;
}*/

/* Step 1: Common Properties: All required to make icons render reliably */
.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  padding-right: 5px;
}
/* Step 2: Reference Individual Icons */
.copypaste::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0c5";
}
.tick::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c";
}
.doubletick::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f560";
}
.roundtick::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f058";
}
.chevronright::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f054";
}
.chevrondown::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f078";
}

.nodeHash:hover {
  cursor: pointer;
  color: #4073B2!important
}

/*table cpanel*/
@media only screen and (min-width: 910px) {
  #tableControlPanel {
    text-align: left;
  }
  #nodeCountContainer, #download-page-as-image, #export-excel {
    float: right;
  }
}
/*table cpanel*/
@media only screen and (max-width: 550px) {
  #tableControlPanel > * {
    display: block!important;
    position: relative!important;
    margin: 5px auto!important;
  }
  /*#tableControlPanel > .switch {
    display: inline-block!important;
  }*/
  #tableControlPanel > #nodeVersionSelect,  #tableControlPanel > #nodeStatusSelect, #tableControlPanel > #nodeCountContainer, #tableControlPanel >#download-page-as-image, #export-excel {
    display: inline-block!important;
  }
}
@media only screen and (min-width: 551px) and (max-width: 909px) {
  #tableControlPanel > #nodeCountContainer, #tableControlPanel > #download-page-as-image, #export-excel {
    display: inline-block!important;
  }
  #nodeCountContainer {
    margin: 10px auto!important;
  }
}