select {display: inline; padding: 10px}
h6 {display: inline;
    padding: 5px;
    font-size: 14px;}

.inline{display: inline;}

.truncatable {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.imagediv{
    display: inline-block;
    height:150px;
    min-width:84px;
    background-color:#ccc;
    border-radius:5px;
    margin:3px;
}

.col{
  padding: 0px;
}

.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  text-align: left;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
  padding: 5px;
  padding-left: 40px;
  padding-right: 60px
}
.autocomplete-items div {
  padding: 1px;
  cursor: pointer;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

input.spinner {
    background-image:url('spinner.gif');
    background-repeat:no-repeat;
    background-position:99% 50%;
    background-size:20px 50%;
}

a.hoverable:hover {
  cursor:pointer;
  text-decoration: underline;
}

.subtitle{
    display: inline;
    color: #888;
    font-size: 12px;
}

a.active {
  background-color: #ddd;
  padding: 12px;
}

button.active {
  background-color: #ddd;
  padding: 12px;
}

.score {
  margin-bottom: 0px;
  display: inline-block;
  color: #ccc;
  position: relative;
}

.score::before,
.score span::before {
  content: "★★★★★";
  font-size: 16px;
}

.score span {
  color: #E6DB74;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.success {
  color: #0a6f4d;
  background-color: #cff1e6;
  border-color: #b7ead9;
}
.success .alert-link {color: #08593e; }

.info {
  color: #153a7c;
  background-color: #d3dff5;
  border-color: #bdd0f0;
}
.info .alert-link {color: #112e63; }

.warning {
  color: #927755;
  background-color: #fdf4e8;
  border-color: #fbeedd;
}
.warning .alert-link {color: #755f44; }

.error {
  color: #87112b;
  background-color: #f9d2da;
  border-color: #f6bbc8;
}
.error .alert-link { color: #6c0e22; }

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
.collapsing {
  transition: none; }
}
.collapsing.collapse-horizontal {
width: 0;
height: auto;
transition: width 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing.collapse-horizontal {
    transition: none; }
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  padding: 16px 12px 8px 12px;
  display: block;
}

.search-bar-api{
  width:400px;
}

[style^=--rating]::after {
  content: "★★★★★";
  white-space: nowrap;
  background: linear-gradient(90deg, #fb0 calc(var(--rating) * 20%), #ddd calc(var(--rating) * 20%));
  background-clip: text;
  -webkit-background-clip: text;
  color: #0000;
}

.right{
    float: right;
}

.floaty {
    display: block;
    position: relative;
    top: 12px;
    z-index: 1;
}

.floating-container{
    position:relative;
    border-width: 1px;
}

.floater{
    position: absolute;
    z-index: 999;

}

.right-top{
    top: 0px;
    right: 0px;
}

.right-top2{
    top: 12px;
    right: 12px;
}

.centered{
    display: flex;
    justify-content: center;
}

.cookiealert {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    padding: 0.75rem 1.25rem;
    z-index: 999;
    border-radius: 0;
    color: #9CA3AF;
    background: #212327;
}

.accordion {
  width: 90%;
  max-width: 1000px;
  margin: 2rem auto;
}
.accordion-item {
  background-color: #fff;
  color: #111;
  margin: 1rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
.accordion-item-header {
  padding: 0.5rem 3rem 0.5rem 1rem;
  min-height: 3.5rem;
  line-height: 1.25rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.accordion-item-header::after {
  content: "+";
  font-size: 2rem;
  position: absolute;
  right: 1rem;
}
.accordion-item-header.active::after {
  content: "-";
}
.accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
  padding: 1rem;
  line-height: 1.5rem;
  border-top: 1px solid;
  border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}

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

.min-height-150{
    min-height: 150px;
}

.min-height-400{
    min-height: 400px;
}

.min-height-200{
    min-height: 200px;
}
.min-height-300{
    min-height: 300px;
}

.max-height-150{
    max-height: 150px;
}

.min-width-400{
    min-width: 400px;
}

.min-width-200{
    min-width: 200px;
}

.max-width-400{
    max-width: 400px;
}

.max-width-800{
    max-width: 800px;
}

.outlined{
    border-style: groove;
    margin: 10px;
}

li::marker {
    content: "";
}

/* to remove bullets from an unordered list */
ul {
  list-style: none;
}

/* to remove bullets from an ordered list */
ol {
  list-style:none;
}

.padded{
    padding:10px;
}

.force-center{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}