:root {
  --ops-bg: #f5f5f5;
  --ops-surface: #ffffff;
  --ops-border: #e2e8f0;
  --ops-text: #0f172a;
  --ops-muted: #475569;
  --ops-primary: #2563eb;
}

.ops-dark {
  --ops-bg: #0b1222;
  --ops-surface: #0f172a;
  --ops-border: #1f2937;
  --ops-text: #e2e8f0;
  --ops-muted: #94a3b8;
  --ops-primary: #60a5fa;
}

body {
  background-color: var(--ops-bg);
  color: var(--ops-text);
}

.bg-light {
  background-color: var(--ops-surface) !important;
}

.text-muted {
  color: var(--ops-muted) !important;
}

.ops-dark .navbar,
.ops-dark .card,
.ops-dark .modal-content,
.ops-dark .modal-header,
.ops-dark .modal-footer,
.ops-dark .dropdown-menu,
.ops-dark .list-group-item {
  background-color: var(--ops-surface);
  color: var(--ops-text);
  border-color: var(--ops-border);
}

.ops-dark .table,
.ops-dark .table th,
.ops-dark .table td {
  color: var(--ops-text);
  border-color: var(--ops-border);
  background-color: var(--ops-surface);
}

.ops-dark .table-striped > tbody > tr:nth-of-type(odd) > * {
  color: var(--ops-text);
  background-color: rgba(255,255,255,0.03);
}

.ops-dark .table-hover > tbody > tr:hover > * {
  color: var(--ops-text);
  background-color: rgba(255,255,255,0.06);
}

.ops-dark .table-hover tbody tr:hover > * {
  background-color: rgba(255,255,255,0.08) !important;
  color: var(--ops-text) !important;
}

.ops-dark .bg-white,
.ops-dark .table .bg-white {
  background-color: var(--ops-surface) !important;
  color: var(--ops-text) !important;
}

.ops-dark .bootstrap-table .table-hover > tbody > tr:hover > td,
.ops-dark .bootstrap-table .table-hover > tbody > tr:hover > th,
.ops-dark .fixed-table-body .table-hover > tbody > tr:hover > td,
.ops-dark .fixed-table-body .table-hover > tbody > tr:hover > th {
  background-color: rgba(255,255,255,0.08) !important;
  color: var(--ops-text) !important;
}

.ops-dark .table thead th,
.ops-dark .table tfoot th {
  background-color: #111827;
  border-color: var(--ops-border);
}

.ops-dark .form-control,
.ops-dark .form-select,
.ops-dark .form-control:focus,
.ops-dark .form-select:focus {
  background-color: #111827;
  color: var(--ops-text);
  border-color: var(--ops-border);
  box-shadow: none;
}

.ops-dark label,
.ops-dark .form-text,
.ops-dark .text-muted {
  color: var(--ops-muted) !important;
}

.ops-dark .table {
  color: var(--ops-text);
}

.ops-dark a {
  color: #93c5fd;
}

.ops-dark .card,
.ops-dark .modal-content,
.ops-dark .list-group-item {
  box-shadow: none;
}

.form-floating > label {
  padding-right: .5rem;
}

.form-signin {
    width: 100%;
    max-width: 450px;
    padding: 15px;
    margin: auto;
  }
  
  .form-signin .checkbox {
    font-weight: 400;
  }
  
  .form-signin .form-floating:focus-within {
    z-index: 2;
  }
  
  .form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  
  .form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .form-subscribe {
    width: 100%;
    max-width: 630px;
    padding: 15px;
    margin: auto;
  }
  
  .truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 300px;
  }
  

/* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
 /* Firefox */
 input[type=number] {
   -moz-appearance: textfield;
   appearance: textfield;
 }
 
.pointer {cursor: pointer;}


.pp-right:after {
  content: "";
  position:absolute;
  margin-top:-6px;
  margin-left:-5px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #dee2e6;
  transform:rotate(-45deg);
  right: -17px; 
  top: 10px;
}

.pp-left:before {
  content: "";
  position:absolute;
  margin-top:-6px;
  margin-left:0px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #dee2e6;
  transform:rotate(45deg);
  left: -17px; 
  top: 10px;
}

.msgr {
  border-radius: 16px;
  border-bottom-right-radius: 0;
}

.msgl {
  border-radius: 16px;
  border-top-left-radius: 0;
}

#ul1 {
  margin-bottom: 60px;
}

.fade-out {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.fade-out.hidden {
  opacity: 0;
}

#results_container {
  border-collapse: separate;
}

#results_container tbody {
  display: block;
  max-height: 500px;
  overflow-y: auto;
}

#results_container thead, 
#results_container tfoot {
  display: table;
  width: 100%;
  table-layout: fixed;
}

#results_container tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}