html {
  font-size: 14px;
  overflow-y: scroll !important; /* Show vertical scrollbar */
}

body {
  /*background-color: #deecda;*/
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.bg-white {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}

.bg-topbar {
  --bs-bg-opacity: 1;
  background: linear-gradient(to left bottom, #0F5A5A, rgb(245,245,245));
}
.bg-topbar2 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

.dataTable {
  margin-left: 0 !important;
}
  .dataTable tr{
    height:12px;
  }

  .dataTable td,
  .dataTable th {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

  .dataTable .details {
    font-size:small;
  }


.form-grid {
  display: grid;
  grid-template-columns: 120px 250px;
  gap: 8px 12px;
  align-items: center;
}

  .form-grid label {
    text-align: right;
  }

  .form-grid input,
  .form-grid select {
    width: 100%;
    max-width: 250px;
  }

  .form-grid button {
    max-width: 100px;
  }

.article-columns {
  column-count: 3;
  column-gap: 30px;
}

  .article-columns h5 {
    break-after: avoid;
  }

  .article-columns p {
    break-inside: avoid;
  }

  .article-columns span {
    break-inside: avoid;
  }