.gl-screen-content {
    background-color: #F3F3F3;
}

.gl-communication-grid-container {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-areas:
        "type target thread"
        "type target thread";
    grid-template-columns: 12.5rem 22.125rem 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
}

.gl-communication-grid-container .gl-communication-grid-column {
    height: 100%;
    overflow-y: auto;
    padding: 0.5rem;
    border-radius: 0.75rem;
    position: relative;
}

.gl-fab-container>.gl-scrollable {
    padding-bottom: 4.625rem;
}

.gl-communication-grid-container .gl-communication-grid-column.gl-communication-types {
    width: 100%;
    height: 100%;
    grid-area: type;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: start;
    gap: 0.5rem;
    background: white;
}

.gl-communication-grid-container .gl-communication-grid-column.gl-communication-targets {
    width: 100%;
    height: 100%;
    grid-area: target;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: start;
    gap: 0.5rem;
    padding: 0px;
    border-radius: 0px;
}

.gl-communication-grid-container .gl-communication-grid-column.gl-communication-thread {
    width: 100%;
    height: 100%;
    grid-area: thread;
    grid-row: span 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: start;
    gap: 0.5rem;
    padding: 0px;
    border-radius: 0px;
}

@media screen and (max-width: 1024px) {
    .gl-communication-grid-container {
        grid-template-areas: "type thread thread";
        grid-template-columns: 1fr 2fr;
    }

    .gl-communication-grid-container .gl-communication-grid-column.gl-communication-targets {
        grid-area: type;
        grid-row: 2;
    }
}

@media screen and (max-width: 768px) {
    .gl-communication-grid-container {
        grid-template-areas:
            "thread"
            "type"
            "target";
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 0px 0px;
        gap: 0px;
    }

    .gl-communication-grid-container .gl-communication-grid-column.gl-communication-targets {
        grid-area: type;
        grid-row: 2;
    }

    .gl-communication-grid-container .gl-communication-grid-column.gl-communication-types {
        padding: 0px;
    }
}

.gl-communication-types-container {
    background: #F0F0F0;
    border-radius: 0.375rem;
    padding: 0.5rem;
    min-height: 2.75rem;
    color: #000;
}

.gl-communication-types-container.disabled {
    color: #999;
}

.gl-communication-types-container.gl-active {
    background-color: var(--color-primary);
    color: white;
}

.gl-communication-types-container .gl-communication-types-container {
    padding: 0rem;
}

.gl-communication-types-container .gl-communication-type-header {
    display: flex;
    align-items: center;
    justify-content: stretch;
    gap: 0.3rem;
    padding: 0.5rem;
    margin-block-end: 0rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
}

.gl-communication-types-container.gl-expanded>.gl-communication-type-header {
    margin-block-end: 0.5rem;
}

.gl-communication-types-container .gl-communication-type-header .gl-communication-type-icon {
    width: 1.2rem;
    height: 1.2rem;
    background-color: currentColor;
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
}

.gl-communication-types-container .gl-communication-type-header .gl-communication-type-icon.gl-icon-inbox {
    mask-image: url('../../img/glool/icon_inbox_communication.svg');
    -webkit-mask-image: url('../../img/glool/icon_inbox_communication.svg');
}

.gl-communication-types-container .gl-communication-type-header .gl-communication-type-icon.gl-icon-expand {
    mask-image: url('../../img/glool/icon_collapse.svg');
    -webkit-mask-image: url('../../img/glool/icon_collapse.svg');
}

.gl-communication-types-container .gl-communication-type-header .gl-communication-type-icon.gl-icon-subject-message {
    mask-image: url('../../img/glool/icon_subject_message_communication.svg');
    -webkit-mask-image: url('../../img/glool/icon_subject_message_communication.svg');
}

.gl-communication-types-container .gl-communication-type-header .gl-communication-type-icon.gl-icon-announcement {
    mask-image: url('../../img/glool/icon_subject_message_communication.svg');
    -webkit-mask-image: url('../../img/glool/icon_announcement_communication.svg');
}

.gl-communication-types-container .gl-communication-type-header .gl-communication-type-icon.gl-icon-note {
    mask-image: url('../../img/glool/icon_note.svg');
    -webkit-mask-image: url('../../img/glool/icon_note.svg');
}

.gl-communication-types-container .gl-communication-type-header .gl-communication-type-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    background: white;
    border-radius: 1rem;
    color: #000;
}

.gl-communication-types-container .gl-communication-type-header .gl-communication-type-title {
    display: flex;
    align-items: center;
    justify-content: start;
    height: 1.6rem;
    flex: 1;
}

.gl-communication-types-container .gl-communication-type-content {
    overflow: hidden;
    height: 0px;
}

.gl-communication-types-container.gl-expanded .gl-communication-type-content {
    height: auto;
}

.gl-target-filters-container {
    display: flex;
    align-items: center;
    justify-content: stretch;
    gap: 0.5rem;
}

.gl-communication-target-container,
.gl-communication-thread-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: start;
    gap: 0.5rem;
    flex: 1;
}

.gl-communication-thread-container {
    border-radius: 0.375rem;
    padding: 0.5rem 0px;
}

.gl-communication-thread-container.gl-announcement-details-container {
    padding: 1rem;
    background: white;
}

.gl-thread-attachments-container {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gl-thread-attachment {
    max-width: 15rem;
    display: flex;
    align-items: center;
    justify-content: stretch;
    gap: 0.5rem;
    cursor: pointer;
}

.gl-thread-attachment-icon {
    width: 3rem;
    height: 3rem;
    background-image: url('../../img/glool/icon_attachment_2.svg');
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #E9E9E9;
    border-radius: 100%;
}

.gl-thread-attachment-info {
    overflow: hidden;
    flex: 1;
}

.gl-thread-attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.gl-communication-tags-container {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 1rem;
    overflow-x: auto;
}

.gl-contact-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}