:root {
  --blue: hsl(237, 96%, 28%);
  --orange: rgb(255, 124, 25);
  --blue-hover: #4147c0;
  --midnight: #011526;
  --midnight-hover: #0e304d;
  --dusk: #1a3540;
  --alert-red: rgba(255, 150, 150, 1);
  --dusk-hover: #305767;
  --cream: #f2f2df;
  --cream-light: #f6f6e8;
  --cream-hover: #d2d2c0;
  --dirt: #8c6c5a;
  --dirt-hover: #ad8b77;
  --light-gray: #ebebeb;
  --input-gray: #e9ecef;
  --default-gray: rgb(112, 112, 112);
  --quick-search: #b8b8b8;

  --menu-hover: #aeaeae;
  --message-timestamp: #d4d4d4;
  --true-white: #ffffff;
  --old-message: #ffffff;
  --new-message: #b2daeb;
  --select-green: #4fc02c;

  /* --old-message: #cfcfcf; */
  --offwhite: #f6f6f6;
  --white20: #d8d8d8;
  --true-black: #000000;
  --robins-egg: #e1edff;
  --light-warning: #ffe69d;
  --input-border: #e1e4e5;
  --new-message: #b2daeb;
}
.text-orange {
  color: var(--orange);
}
.bg-comment-gray {
  background-color: #d7d7d7;
}

.bg-alert-red {
  background-color: var(--alert-red);
}
.bg-select-green {
  background-color: var(--select-green);
}
.bg-input-gray {
  background-color: var(--input-gray);
}
.border-input-border {
  border-color: var(--input-border);
}
.border-blue {
  border: 1px solid var(--blue);
}
.border-dusk {
  border: 1px solid var(--dusk);
}
.border-cream {
  border-color: var(--cream);
}
.border-offwhite {
  border-color: var(--offwhite);
}
.border-old-message {
  border-color: var(--old-message);
}
.bg-light-gray {
  background-color: var(--light-gray);
}
.bg-light-warning {
  background-color: var(--light-warning);
}
.bg-blue {
  background-color: var(--blue);
}
.bg-midnight {
  background-color: var(--midnight);
}
.bg-dusk {
  background-color: var(--dusk);
}
.bg-dusk-nohover {
  background-color: var(--dusk);
}
.bg-dusk:hover {
  background-color: var(--dusk-hover) !important;
}
.bg-dusk:active {
  background-color: var(--dusk-hover) !important;
}
.bg-cream-light {
  background-color: var(--cream-light);
}
.bg-cream {
  background-color: var(--cream);
}
.bg-dirt {
  background-color: var(--dirt);
}
.bg-old-message {
  background-color: var(--old-message);
}
.bg-new-message {
  background-color: var(--robins-egg);
}
.bg-offwhite {
  background-color: var(--offwhite);
  border-radius: 10px 10px 10px 0; /* top-left, top-right, bottom-right, bottom-left */
}
.bg-robins-egg {
  background-color: var(--robins-egg);
  border-radius: 10px 10px 0px 10px; /* top-left, top-right, bottom-right, bottom-left */
}
.bg-old-message {
  background-color: var(--old-message);
}
.bg-comment-gray {
  background-color: var(--comment-gray);
}
.bg-qs {
  background-color: var(--quick-search);
}
/* .bg-send-message {
    background-color: var(--offwhite);
    border-color: var(--quick-search);
    outline:none;
} */

.text-blue {
  color: var(--blue);
}
.text-midnight {
  color: var(--midnight);
}
.text-dusk {
  color: var(--dusk);
}
.text-cream {
  color: var(--cream);
}
.text-cream:hover {
  color: var(--cream) !important;
}
.text-cream:active {
  color: var(--cream) !important;
}
.text-default-gray {
  color: var(--default-gray) !important;
}

.text-dirt {
  color: var(--dirt);
}

.btn-light-warning {
  background-color: var(--light-warning);
}
.btn-blue {
  background-color: var(--blue);
  border: 1px solid var(--cream);
}
.btn-blue:hover,
.btn-blue:active,
.btn-blue-hover:hover,
.btn-blue-hover:active,
.btn-blue:focus-visible {
  background-color: var(--blue-hover) !important;
  border: 1px solid var(--cream) !important;
}
.btn-midnight:hover {
  background-color: var(--midnight-hover);
  border: 1px solid var(--cream);
}
.btn-midnight {
  background-color: var(--midnight);
  border: 1px solid var(--cream);
}
.btn-dusk {
  background-color: var(--dusk);
  border: 1px solid var(--dusk);
  color: var(--cream) !important;
}
.btn-dusk:hover {
  background-color: var(--dusk-hover) !important;
  border: 1px solid var(--cream);
  color: var(--cream) !important;
}
.btn-dusk:focus-visible {
  background-color: var(--dusk-hover) !important;
  border: 1px solid var(--cream) !important;
  color: var(--cream) !important;
}
.btn-dusk-active {
  background-color: var(--cream) !important;
  border: 1px solid var(--dusk) !important;
  font-weight: bold !important;
  color: var(--dusk) !important;
}
.btn-dusk:active {
  background-color: var(--dusk-hover) !important;
  border: 1px solid var(--cream) !important;
  color: var(--cream) !important;
}
.btn-cream:hover {
  background-color: var(--cream-hover);
  border: 1px solid var(--dusk);
}
.btn-cream {
  background-color: var(--cream);
  border: 1px solid var(--dusk);
}
.btn-dirt:hover {
  background-color: var(--dirt-hover);
  border: 1px solid var(--cream);
}
.btn-dirt {
  background-color: var(--dirt);
  border: 1px solid var(--cream);
}