:root {
  --text-color-light: #fff;
  --bg-color: #f5f5f5;
  --text-color: #333;
  --primary-color: #57a1cf;
  --primary-color-hover: #498fbb;
  --secondary-color: #f0eff1;
  --edit-color: #e68852;
  --edit-color-hover: #c67546;
  --btn-color: #cfd5ea;
  --btn-color-hover: #b0b5ca;
  --table-striped-bg: #e9edf6;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  min-height: 100vh;
  /*max-width: calc(100vw - 10px);*/
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

input::placeholder {
  color: rgba(100, 104, 104, 0.621) !important;
}

.row {
  margin: 0;
}

.row-card {
  background: var(--secondary-color);
  border: 1px solid rgba(0, 0, 0, 0.175);
  border-radius: 0.375rem;
  height: 135px;
}

/* .row .col {
  padding: 0 !important;
} */

.btn {
  color: #3e3d3d;
  background-color: var(--btn-color);
  border-radius: 5px !important;
  border: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.274);
}

.btn:hover {
  background-color: var(--btn-color-hover);
}

.btn-primary {
  color: #fff;
  background-color: var(--primary-color) !important;
}

.btn.active {
  color: #fff;
  background-color: var(--edit-color) !important;
  /*background-color: #29b272 !important;*/
}

.btn-primary:hover {
  background-color: var(--primary-color-hover) !important;
}

.btn-warning {
  background-color: var(--edit-color) !important;
  color: #fff;
}

.btn-warning:hover {
  background-color: var(--edit-color-hover) !important;
  color: #fff;
}

.scan-data textarea {
  height: 100%;
  width: 100%;
  resize: none;
  border: none;
  background-color: var(--secondary-color);
}

.scan-data textarea:focus {
  border: none;
}

.scan-data .card-header {
  background-color: var(--primary-color) !important;
}

.scan-data .card-body {
  background-color: var(--secondary-color) !important;
}

.input-group-text {
  background: transparent;
  border: none;
}

.form-control, .form-select {
  border-radius: 5px !important;
}

.table thead tr th {
  text-align: center;
  background-color: var(--primary-color) !important;
  color: var(--text-color-light);
}

.table tbody tr td:first-child {
  text-align: start;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: transparent;
}

.table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-bg-type: var(--table-striped-bg);
}

.modal .modal-header {
  background: var(--primary-color);
  color: #fff;
}