#inboxAction.inactive {
    opacity: 0;
    transition: var(--transition-3s);
}

#inboxAction.active {
    opacity: 1;
    transition: var(--transition-3s);
}

/* #inboxAction */
.input-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid var(--bs-border-color);
    min-height: 42px;
    position: relative;
}

.input-tags input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 120px;
    padding: 4px;
}

.tag {
    background: var(--bs-card-bg);
}

.tag img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.remove-tag {
    cursor: pointer;
    font-weight: bold;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    margin-top: 4px;
    padding: 0;
    white-space: nowrap;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
}

.dropdown-item img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.highlight {
    background-color: var(--bs-primary);
    color: var(--bs-body-color);
}

/* Ckeditor */
.compose-content {
    height: calc(100% - 150px);
}

#editor-container {
    flex: 1;
}

.ck.ck-editor {
    min-height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.ck.ck-editor__main {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ck.ck-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    border-radius: 0 0 .6rem .6rem !important; 
}
.ck.ck-content:focus{
    border-color: var(--bs-primary) !important;
    box-shadow: none !important;
    outline: none !important;
}
.ck.ck-toolbar{
    background: var(--bs-primary-bg-subtle) !important;
    border-radius: .6rem .6rem 0 0 !important;
}
.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content,
.ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){
    border-color: var(--bs-border-color) !important;
}
/* .ck-reset_all :not(.ck-reset_all-excluded *), .ck.ck-reset_all{
    color: var(--bs-white) !important;
} */
.ck.ck-editor__main>.ck-editor__editable{
    background: transparent !important;
}
.ck.ck-sticky-panel__content{border: 0 !important;}


.email-list{
    border-top: 1px solid var(--bs-border-color) !important;
    border-bottom: 0;
}
.email-list.open,
.email-list:hover{
    background: rgba(var(--bs-primary-rgb), .05);
    border-color: var(--bs-primary) !important;
}
.unread{
    background: rgba(var(--bs-primary-rgb), .05);
}
.email-list .subject{
    cursor: pointer;
}


@media (min-width: 768px) { 
    .email-list .info{
        min-width: 210px;
    }
}