/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\
for details on configuring this project to bundle and minify static web assets. */

@media (prefers-color-scheme: light) {
    .modal-backdrop-background-color {
        background-color: black !important; 
        opacity: 0.3 !important;
    }
}

@media (prefers-color-scheme: dark) {
    .modal-backdrop-background-color {
        background-color: var(--bs-gray) !important;
    }
}

.selected-chat {
    border-radius: 6px;
    color: white !important;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.white-color {
    color: white;
}

.w-100 {
    width: 100% !important;
}

.cursor-pointer {
    cursor: pointer;
}

.active-card {
    border-color: var(--bs-primary) !important;
    border: 3px solid;
    border-radius: .6rem;
}

.icon-chat {
    padding: 0 .1em 0 .1em;
    position: relative;
    top: 0.2em;
}

.icon-chat-small {
    font-size: 15px !important;
    padding: 0 1em 0 0.4em;
    position: relative;
    top: 0.2em;
}

.height-100 {
    height: 100vh;
}

.image-downloaded-chat {
    max-width: 350px;
    cursor: pointer;
}

.image-downloaded-chat img {
    transition: all 0.2s ease-in-out;
    width: 100%;
}

.video-downloaded-chat video {
    max-width: 350px;
}

.document-downloaded-chat a {
    padding: 20px;
}

.w-fit {
    width: fit-content;
}

/*Reply Common*/
.reply-text {
    display: flex;
    padding: 0.5em 0.5em 0.5em 0.3em;
    margin-bottom: 0.2em;
    border-radius: 10px;
    transition: ease-in-out background 0.2s;
}

    .reply-text:hover {
        cursor: pointer;
    }

.message-out .reply-text:hover {
    background-color: #0c71c6;
}

.reply-text .line {
    width: 2px;
    margin-right: 0.5rem;
}

.message .reply-text .line {
    background: slategrey;
}

.message-out .reply-text .line {
    background: white;
}

.reply-text {
    font-size: smaller;
    font-weight: bold;
}

/*Utils*/
.word-break-all {
    word-break: break-all
}

.w-min-content {
    width: min-content !important;
}

.w-fit-content {
    width: fit-content !important;
}

.whitespaces-break {
    white-space: break-spaces !important;
}

.bg-lightgreen {
    background-color: #64ab8f;
}

.bg-redish-orange {
    background-color: #c15143;
}

.emoji-reaction {
    position: absolute;
    bottom: -0.6em;
    font-size: 2em;
}

.reaction-min-width {
    min-width: 5em;
}


.img-zoomed{
    width: 100%;
    height: 100%;
    z-index: 9999;
    position: fixed;
    top: 0;
    left:0;
}

.img-zoomed img {
    position: fixed;
    top: 0;
    left: 0%;
    z-index: 9999;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 3%;
    object-fit: contain;
}

.form-floating input:-webkit-autofill + label {
    color: black !important;
}

.form-floating input:-webkit-autofill + label {
    color: black !important;
}

.template-message-body{
    white-space: pre-line;
}

/*ScrollBar*/
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #DFE9EB #8F9397;
}

    /* Chrome, Edge and Safari */
    *::-webkit-scrollbar {
        width: 9px;
        height: 9px;
    }

    *::-webkit-scrollbar-track {
        border-radius: 8px;
    }

    *::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #8F9397;
    }

        *::-webkit-scrollbar-thumb:hover {
            background-color: #9FA3A8;
        }

        *::-webkit-scrollbar-thumb:active {
            background-color: #75787C;
        }