/* These styles are generated from project.scss. */

.alert-debug {
    color: black;
    background-color: white;
    border-color: #d6e9c6;
}

.alert-error {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}

a {
    color: grey; /* Default color for all <a> elements */
    transition: color 0.3s; /* Smooth transition effect for color changes */
}

a:hover {
    color: #333; /* Darker grey color on hover */
}


.btn.btn-primary {
    background-color: lightgrey; /* Default background color */
    color: grey; /* Default text color */
    border: none;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Smooth transition effect for background color, text color, and border color changes */
}

.btn.btn-primary:hover {
    background-color: grey; /* Background color on hover */
    color: white; /* Text color on hover */
    border-color: darkgrey; /* Border color on hover */
}

.btn.btn-primary:focus {
    outline: 4px solid darkgrey; /* Change the focus border color to dark grey */
}

.title-icon {
    font-size: 14px;
}

code {
    color: black;
}

b {
    color: grey;
    font-weight: normal;
}


.text-list {
    list-style-type: none;
    padding: 0;
}

.user_msg span, .system_msg span {
    display: inline-block;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 10px;
    padding: 10px;
    position: relative;
    font-size: 15px;
}

/* Small corner which looks lets the container look like a speech-buble*/
.user_msg span::after {
    content: "";
    position: absolute;
    top: 23px;
    right: -6px;
    width: 10px;
    height: 10px;
    background: white;
    border-top: 1px solid lightgray;
    border-right: 1px solid lightgray;
    transform: rotate(45deg);
}

/* Small corner which looks lets the container look like a speech-buble*/
.system_msg span::after {
    content: "";
    position: absolute;
    top: 23px;
    left: -6px;
    width: 10px;
    height: 10px;
    background: white;
    border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    transform: rotate(135deg);
}