div[visible="false"] {
    visibility: hidden;
    display: none;
}
#chat-overlay {
    background-color: rgb(62 62 62 / 21%);
    border-radius: 57px;
    backdrop-filter: blur(30px);
    position: absolute;
    overflow: visible;
    width: 400px;
    height: 400px;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
}
::placeholder {
    color: white;
  }
.title {
    font-family: 'Copyright Klim Type Foundry', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 25px;
    padding: 1em;
    color: white;
    height: 2.5em;
    letter-spacing: 1.2pt;
    backdrop-filter: blur(20px);
}
.chat-window {
    height: 70%;
    padding: 1em;
    margin-top:12px;
    overflow-y: scroll;
    z-index: 4;
}
.chat-window::-webkit-scrollbar {
    display: none;
}
.entry-section {
    text-align: center;
    display: grid;
    grid-template-rows: 25% 40% 35%;
    height: 16%;
}
.entry-row {
    display: grid;
    grid-template-columns: 80% 20%;
}
.text-input {
    width: 90%;
    font-family: 'Copyright Klim Type Foundry', sans-serif;
    font-style: normal;
    /* position: absolute; */
    margin-left: 25px;
    font-weight: 300;
    font-size: 16px;
    border-radius: 22px;
    color: white;
    background-color: rgb(0,0,0,0.56);
    padding-left: 1em;
    backdrop-filter: blur(5px);
    border: none;
}
.msg {
    padding: 1em;
    
    font-family: 'Copyright Klim Type Foundry', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    color: white;
    display: inline-block;
}
.block {
    border-radius: 30px;
    margin: 0.3em;
}
.user-block > .msg {
    background-color: rgba(57,125,242,1);
    border-radius: 30px;
}
.ai-block > .msg {
    background-color: rgba(80,80,80,1);
    border-radius: 30px;
}
#start-animation {
    position: absolute;
    top: 35%;
    left: 40%;
}
.plus-svg {
    position: absolute;
    width: 3em;
    height: 3em;
    left: 28px;
}
#plus-ellipse {
    fill: rgba(90,90,90,1);
}
#plus-icon {
    position: absolute;
    z-index: 1;
    width: 18px;
    height: 18px;
    left: 41px;
    top: 591px;
}
#arrow-icon {
    height: 36px;
    width: 36px;
    position: relative;
    z-index: 1;
    top: 3px;
    left: 15px;
    /* margin-left: -25px; */
}
#submit-chat-button {
    position: absolute;
    height: 36px;
    width: 36px;
    margin-left: 14px;
    margin-top: 3px;
    z-index: 100;
    opacity: 0.0;
    cursor: pointer;
}
#line-path {
    stroke: rgba(112,112,112,1);
}

#green-bubble {
    fill: rgba(58,250,0,1);
}
.green-bubble {
    position: absolute;
    overflow: visible;
    width: 16px;
    height: 16px;
    left: 380px;
    top: 60px;
}


.msgloader {
    color: white;
    width: 3px; /* Set width to 3px */
    height: 3px; /* Set height to 3px */
    border-radius: 50%; /* Keep it circular */
    box-shadow: 15px 0 0 7px, 30px 0 0 3px, 45px 0 0 0; /* Adjusted box-shadow for the smaller animation */
    transform: translateX(-25px); /* Adjust translate value if necessary */
    animation: l21 .5s infinite alternate linear;
}

@keyframes l21 {
    50%  {box-shadow: 15px 0 0 3px, 30px 0 0 7px, 45px 0 0 3px} /* Adjust shadow sizes for the smaller effect */
    100% {box-shadow: 15px 0 0 0, 30px 0 0 3px, 45px 0 0 7px}
}

.loader-block {
    
  padding-left: 30px;
  padding-top: 15px;
  justify-content: center;
    
}