assets/style.css

.warning-box {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: 4px;
    padding: 15px 20px;
    font-size: 14px;
    color: #856404;
    display: inline-block;
    margin-bottom: 15px;
}


.tip-box {
    background-color: #f0f9ff;
    border: 1px solid #80d4fa;
    border-radius: 4px;
    margin-top: 20px;
    padding: 15px 20px;
    font-size: 14px;
    color: #006064;
    display: inline-block;
    margin-bottom: 15px;
    width: auto;
}

.tip-box-title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
}

.light-bulb {
    display: inline;
    margin-right: 5px;
}

.gr-box {
    border-color: #d6c37c
}

#hidden-message {
    display: none;
}

.message {
    font-size: 14px !important;
}


a {
    text-decoration: none;
    color: inherit;
}

.card {
    background-color: #233f55;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 20px;
}

.card-content {
    padding: 20px;
}

.card-content h2 {
    font-size: 14px !important;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 0px !important;
    color: #577b9b !important;
    ;
}

.card-content p {
    font-size: 12px;
    margin-bottom: 0;
}

.card-footer {
    background-color: #f4f4f4;
    font-size: 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-footer span {
    flex-grow: 1;
    text-align: left;
    color: #999 !important;
}

.pdf-link {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    text-decoration: none !important;
    font-size: 14px;
}



.message.user {
    background-color: #b20032 !important;
    border: none;
    color: white !important;
}

.message.bot {
    /* background-color: #f2f2f7 !important; */
    border: none;
}

.gallery-item>div:hover {
    background-color: #7494b0 !important;
    color: white !important;
}

.gallery-item:hover {
    border: #7494b0 !important;
}

.gallery-item>div {
    background-color: white !important;
    color: #577b9b !important;
}

.label {
    color: #577b9b !important;
}

.paginate {
    color: #577b9b !important;
}


label>span {
    color: #577b9b !important;
}

/* Pseudo-element for the circularly cropped picture */
.message.bot::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: 30px;
    height: 30px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACnUlEQVR4AcXXA4wkQRiG4eHZtm3btm3btm3bDs+2bdvm2vPfm6Qu6XRuOz3LSp7xdH3ltCU8Za+lsA1JYLVER6HiOFiFXkgGa1QHiIvzCMQplI2uAKJMiY4A50ILwHs7bGG9eFqUQgx3A2gq74X+SAGrO5U7MQvfsAKF4XAzQD68QSDOoLbp3lAt/wxR3mMGssNmFEDTgAUQJQTTYDO7ticgEKLhwhMMRVpYDQIUwyeI8hhZzbbeipQYgNsIhmgE4xraIqk+AGJiNUQJwjCD1hsGSYfheIgQiIYXJuASRJmM8vgBUa4hdXi328yYgGdwQZSvuq4ehi0QxR9dYTVTUWIUQmEDtbESbzRBXBB4Yyb+QJTjSGx22U3DD/wMxQ+8xxXswRt8wjUInuKsboiamG19aXyBuCEQC9AIP/AZPhC4sBVxzVQeG2vgDR8YCYDgG1YhNZxoiWsIgi/2IA/iwojTwkMsFEN5VAhFRYzAc7hwFbXggBX5sB1+8MRNnNc5p3MAxcyuhOJ4ppvdX9ABuXET4qbtZocoLnZBFG+ch+AeNsED9/AFIRAY+YSSZjejBvCCKCdwGoJA+CII97EAA9Efg3SGYBRGoxkcZgIkwTGI8ge98RqCYHhClACcQRskMlqCZlvfCQEQZScqwQMCH6yFN0TDD0fRFAnCGiANrkKUH6iICvDRBKiOAZpe0fLBftRFXHf3/yG6k3ADYkIfoDzsKICV+ArR8cQGJDYbIBseQ5TP/2bt/wJo/hcD5bADHhCNrYhtNkA5PIILgiVwGgbQ7a6oh8PwxUeUdHcIcmABrqGAhWIygPY6CdEefY2XnfEpmQ52gwAVTKwmmyW8xTBAVBZ1yt2DK7oC2JAdc/EM5aPrztiJEkgXnuv8BdWTESwwR9FxAAAAAElFTkSuQmCC');
    background-color: #fff;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    z-index: 10;
}



.user.svelte-6roggh.svelte-6roggh {
    padding: 17px 24px;
    text-align: justify;
}

.gallery.svelte-1ayixqk {
    text-align: left;
}

.card-content p,
.card-content ul li {
    color: #fff !important;}


.message.bot, .bot.svelte-6roggh.svelte-6roggh  {
    background: #233f55 !important;
    padding: 17px 24px !important;
    text-align: justify !important;
    color: #fff !important;
}

#chatbot{
    height: auto !important;
    max-height: 1000px;
}

#type-emb label {
    background: #ebeaea;
}

.source {
background-color: #f8f9fa;
border: 1px solid #ddd;
padding: 15px;
margin-bottom: 10px;
border-radius: 4px;
}

.title {
font-size: 18px;
color: #333;
margin-bottom: 5px;
font-weight: bold;
}

.wrap.svelte-6roggh.svelte-6roggh {
    padding: var(--block-padding);
    height: 100%;
    max-height: 480px;
    overflow-y: auto;
    max-height: 1000px;
}