body {
  margin-top: 20px;
  background-image: linear-gradient(to right top, #4f0329, #59003a, #5f0050, #5e0969, #531c85, #452890, #313199, #003aa2, #003d9a, #004092, #074289, #15437f);

}
.chat-messages {
  /*background-image: url('ai/resources/img/bgnav.png'); 
  background-repeat: repeat;*/
  background-color: rgba(255, 255, 255, 0);
  background-blend-mode: overlay;
  color:rgb(255,255,255);
}

.card-body {
  font-size: 0.9rem;
  line-height: 1.2em;
  color:#cacdfe;
}
.card {
  background-color: rgba(255, 255, 255, 0);
}
.card-title {
  line-height: 1.2em;
}

.chat-online {
  color: #34ce57
}

.chat-offline {
  color: #e4606d
}

.chat-messages {
  display: flex;
  flex-direction: column;
  max-height: 700px;
  overflow-y: scroll;
  border: 0;
}

.chat-message-left,
.chat-message-right {
  display: flex;
  flex-shrink: 0;
}

.chat-message-left {
  margin-right: auto
}

.chat-message-right {
  flex-direction: row-reverse;
  margin-left: auto
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.border-top {
  border-top: 1px solid #dee2e6 !important;
}

.bg-translucid {
    background-color:  rgba(255, 255, 255, 0.2);
}
.bg-translucid-2 {
    background-color:  rgba(60, 80, 98, 0.3);
}

.flex-shrink-1 {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
}
.mb-3 {
  color:white;
  font-family:"Andale Mono", AndaleMono, monospace;
}

textarea:focus,
input[type="text"]:focus,
.uneditable-input:focus {   
  border-color: rgba(36, 101, 312, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(36, 101, 312, 0.6);
  outline: 0 none;
}

.hideScroll {
  overflow: auto;
  height: 100px;
  scrollbar-width: none; /*Firefox*/
}

/*Webkit*/
.hideScroll::-webkit-scrollbar {
  width: 0;
}

.custom-loader {
  width: 35px;
  height: 13px;
  background:#440340;
  border-radius: 25px;
  --c:radial-gradient(farthest-side,#000 92%,#0000);
  --s:9px 9px;
  -webkit-mask:
    var(--c) left  2px top 50%,
    var(--c) center,
    var(--c) right 2px top 50%,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  -webkit-mask-repeat:no-repeat;
  animation: cu1 1.5s infinite;
}

@keyframes cu1 {
  0%    {-webkit-mask-size:0    0  ,0    0  ,0    0  ,auto}
  16.67%{-webkit-mask-size:var(--s),0    0  ,0    0  ,auto}
  33.33%{-webkit-mask-size:var(--s),var(--s),0    0  ,auto}
  50%   {-webkit-mask-size:var(--s),var(--s),var(--s),auto}
  66.67%{-webkit-mask-size:0    0  ,var(--s),var(--s),auto}
  83.33%{-webkit-mask-size:0    0  ,0    0  ,var(--s),auto}
  100%  {-webkit-mask-size:0    0  ,0    0  ,0    0  ,auto}
}