:root {
  --white-v1: #ffffff;
  --gray-v1: #e0e0e0;
  --gray-v2: #c0c0c0;
  --gray-v3: #6c757d;
  --gray-v35: #282f34;
  --gray-v4: #343a40;
  --gray-v5: #56606a;
  --green-v1: #00ff00;
  --green-v2: #c5d4cc;
  --warninng-green: #049200;
  --warninng-yellow: #FFA833;
  --warninng-red: ##FF3333;

}


.grey-bg {
  background-color: var(--gray-v1);
}

.white-fc {
  color: var(--white-v1);
}

body {
  background-color: var(--white-v1);
  color: var(--gray-v3);
}

/* start of desktop styles */
.table-responsive .table-bordered tr td {
  border: 1px solid var(--gray-v2);
}

.card-header {
  font-size: 20px !important;
}

i.fa-solid {
  padding-top: 5px;
  font-size: 30px;
  cursor: pointer;
  user-select: none;
}

.fa-solid:hover {
  color: rgba(255, 255, 255, .75);
}
.pagination {
  align: right !important;
  padding: 5px;
  background-color: rgba(0,0,0,.03);
}
.pagination a {
  text-align: right !important;
  align: right;
  padding: 5px;
  color: var(--gray-v3);
}
.ls-info {
  padding-top: 10px;
}
.ls-info b {
  color: var(--gray-v3);
}

.dark-mode {
  background-color: var(--gray-v4);
  color: var(--gray-v3);
}

.dark-mode .card-body {
  background-color: var(--gray-v4);
}

.dark-mode .navbar-brand {
  color: var(--green-v1);
}

.dark-mode .card-header {
  color: var(--gray-v2);
  background-color: var(--gray-v5);
}

.dark-mode .table-condensed {
  color: var(--gray-v2);
  background-color: var(--gray-v4);
}

.dark-mode .table-responsive {
  background-color: var(--gray-v4);
}

.dark-mode .grey-bg {
  background-color: var(--gray-v5);
  color: var(--gray-v2);
}

.logo-image {
  content: url("../../config/z37cpr-dark-3.png"); // black
}

.dark-mode .logo-image {
  content: url("../../config/z37cpr-dark-4.png"); // gray #c0c0c0
}

.dark-mode th {
  color: var(--green-v2);
}

.dark-mode td {
  color: var(--gray-v2);
}

.dark-mode a {
  color: var(--green-v1);
}

.dark-mode .card {
  border-color: var(--gray-v2);
  background-color: var(--gray-v4);
}

.dark-mode .pre-scrollable {
  color: var(--gray-v2);
  background-color: var(--gray-v4);
}

.dark-mode .progress-bar {
  background-color: var(--green-v1);
}

.dark-mode div#elgauge {
  background-color: var(--gray-v4);
  colorBG: var(--gray-v5);
}
.dark-mode .pagination {
  align: right !important;
  padding: 5px;
  background-color: var(--gray-v5);
}
.dark-mode .pagination a {
  text-align: right !important;
  align: right;
  padding: 5px;
  color: var(--gray-v2);
}
.dark-mode .ls-info {
  padding-top: 10px;
}
.dark-mode .ls-info b {
  color: var(--green-v2);
}

.dataTables_wrapper {
	padding:10px!important;
}

.dark-mode tbody tr:nth-of-type(odd) {
	background-color: var(--gray-v35)!important;
}

.dark-mode tbody tr:nth-of-type(odd):hover {
	background-color: var(--gray-v5)!important;
}

tbody tr:nth-of-type(odd):hover {
	background-color: var(--gray-v2)!important;
}

.dark-mode tbody tr:nth-of-type(even) {
	background-color: var(--gray-v4)!important;
}

.dark-mode tbody tr:nth-of-type(even):hover {
	background-color: var(--gray-v5)!important;
}

tbody tr:nth-of-type(even):hover {
	background-color: var(--gray-v2)!important;
}

.dark-mode .dataTables_wrapper .dataTables_paginate .ellipsis {
	color:lightgray!important;
}

.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
	background-color: lightgray!important;
}

.dark-mode .dataTables_wrapper .dataTables_filter label {
	color: var(--gray-v1)!important;
}

.dark-mode .dataTables_wrapper .dataTables_filter input {
	background-color:var(--gray-v3)!important;
	color: var(--gray-v1)!important;
}

.dark-mode .dataTables_wrapper .dataTables_length label {
	color: var(--gray-v1)!important;
}

.dark-mode .dataTables_wrapper .dataTables_length select {
	background-color:var(--gray-v4)!important;
	color: var(--gray-v1)!important;
}

.dark-mode #historyTable_info {
	color: var(--gray-v1)!important;
}


@media screen and (max-width: 991px) {
/* start of large tablet styles */

}

@media screen and (max-width: 767px) {
/* start of medium tablet styles */

}

@media screen and (max-width: 479px) {
/* start of phone styles */
    .row {
        display: block !important;
    }
    .col-2 .col-4 .col-8 .col-10 {
        width: 100% !important;
    }
    .img {
        max-height: 300px; 
        max-width: auto;
    }
    .logo-image {
        align: center;
        width: 300px !important;
    }
    .dark-mode .logo-image {
        align: center;
        width: 300px !important;
     }

}