nav.main-menu {
    overflow: scroll;
    height: 85vh;
}

.submenu .menu-item-label {
    font-weight: 500;
    font-size: 0.8em;
}

.modules-bg {
    background-image: url("../static/bg-c44fda217a3be2d69171abc344012b2c.svg") !important;
}

dialog[open] {
    opacity: 1;
    transform: scaleY(1);
}

/*   Closed state of the dialog   */
dialog {
    width: 75%;
    max-width: 600px;
    padding: 0;
    background-color: transparent;
    border: none;
    opacity: 0;
    transform: scaleY(0);
}

/* Transition the :backdrop when the dialog modal is promoted to the top layer */
dialog::backdrop {
    background-color: rgb(0 0 0 / 0%);
}

dialog[open]::backdrop {
    background-color: rgb(0 0 0 / 25%);
}

::backdrop {
    background-image: linear-gradient(
            45deg,
            #cecece,
            #303030,
            #505050,
            #cecece
    );
    opacity: 0.75;
}

.fs {
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popover {
    width: 400px!important;
    box-shadow: var(--bs-box-shadow-lg)!important;
}
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow:after, .bs-popover-end>.popover-arrow:after, .popover.ea-content-help-popover.bs-popover-auto[data-popper-placement^=right]>.popover-arrow:after {
    border-right-color:  #fdeded!important;
}
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow:after, .bs-popover-start>.popover-arrow:after, .popover.ea-content-help-popover.bs-popover-auto[data-popper-placement^=left]>.popover-arrow:after {
    border-left-color:  #fdeded!important;
}
.popover-header {
    background: #5368d536;
    font-size: 0.9em;
    padding: 5px;
}
.popover-body {
    background: #f5c0c04a;
}
.tooltip {
    z-index: 1000;
}

.content-top .content-search input[type=search][name=global_search] {
    background: var(--content-search-input-bg);
    border: 0;
    box-shadow: none;
    max-width: unset;
}

.comments-42 {
    height: 42px;
    overflow: auto;
    border-left: 7px double #cecece;
    padding-left: 5px;
}

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

.edit-inline {
    width: inherit;
    font-size: inherit;
    border: none;
    padding: 0px;
    display: inline-block;
}

.conversation {
    max-width: 600px;
    padding: 10px;
    background-color: #86863030;
}

.message {
    margin-bottom: 10px;
    padding: 2px;
    border-radius: 8px;
    max-width: 90%;
    clear: both;
}

.message-content {
    /*background-color: #dcf8c6; /* Light green for your messages */
    padding: 2px;
    border-radius: 8px;
    font-size: 13px;
    min-width: 150px;
    max-width: 99%; /* Adjust as necessary */
}
.message-content span {
    word-break: break-word;
}

.message-time {
    color: #999;
    font-size: 12px;
    text-align: right;
    margin-top: 5px;
    margin-right: 5px;
}

.mine {
    float: right;
    background-color: #dcf8c6; /* Light green for your messages */
}

.theirs {
    float: left;
    background-color: #fff; /* White for other person's messages */
}

/* Additional styling for a more WhatsApp-like appearance */
.conversation {
    overflow-y: auto;
    max-height: 65vh; /* Limiting conversation height with scroll */
}

.message {
    clear: both;
    overflow: hidden;
}


.message-time {
    display: block;
}

.quoted-message {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding-left: 6px;
    font-size: 0.6em;
    word-break: break-all;
    padding-top: 4px;
    padding-bottom: 4px;
}
.quoted-message .img-fluid {
    max-width: 50%;
}

.quoted-message.quoted-theirs {
    background-color: #f3f3f3;
    border-left: 4px solid red;
}

.quoted-message.quoted-mine {
    background-color: #f5fff2;
    border-left: 4px solid green;
}

.mine-message {
    color: green;
    font-weight: bold;
}

.theirs-message {
    color: red;
    font-weight: bold;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-pointer:hover {
    background-color: #2a6bf61f;
}

.unread-msg  {
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: azure;
    border-bottom: 1px solid #cecece;
}
.unread-msg:hover {
    background-color: #5368d536;
}

@-webkit-keyframes blinker {
    from { opacity: 1.0; }
    to { opacity: 0.0; }
}

.autoanswering {
    -webkit-animation-name: blinker;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
    -webkit-animation-duration: 1.7s;
}