.message-attachment-header {
    padding: 19px 21px 15px;
}

.message-attachment-specs {
    padding: 14px 21px 0;
}

.message-attachment-specs span {
    padding: 5px 9px;
}

.message-attachment-formats {
    margin: 9px 21px 0;
}

.message-attachment-note {
    margin-top: 3px;
    margin-right: 21px;
    margin-bottom: 13px;
    margin-left: 21px;
}

.message-attachment-upload-area {
    padding: 0 21px 18px;
}

.message-attachment-dropzone {
    padding: 22px 18px 19px;
}

.message-attachment-dropzone-icon {
    width: 40px;
    height: 40px;
    font-size: 24px;
}

.message-attachment-existing {
    margin: 0 21px 16px;
    padding: 14px;
    border: 1px solid #dce5ed;
    border-radius: 7px;
    background: #f8fafc;
}

.message-attachment-existing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #344c5e;
    font-size: 12px;
}

.message-attachment-existing-header span {
    color: #7a8b98;
    font-size: 11px;
}

.message-attachment-existing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.message-attachment-existing-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dbe4eb;
    border-radius: 6px;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease, opacity .15s ease;
}

.message-attachment-existing-card.is-marked-delete {
    border-color: #e3aaa6;
    background: #fff6f5;
    opacity: .72;
}

.message-attachment-existing-link {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 2px 9px;
    min-width: 0;
    padding: 10px;
    color: #337ab7;
}

.message-attachment-existing-link:hover {
    background: #f4f9fd;
    color: #286090;
    text-decoration: none;
}

.message-attachment-existing-link.is-disabled {
    color: #7d8c98;
    opacity: .65;
}

.message-attachment-existing-name {
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-attachment-delete {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 10px;
    border-top: 1px solid #e5ebf0;
    color: #a54540;
    font-size: 11px;
    font-weight: 400;
    cursor: pointer;
}

.message-attachment-delete input {
    margin: 0;
}

.message-attachment-limit {
    margin: 0 21px 18px;
}

.message-attachment-limit strong {
    display: block;
    margin-bottom: 3px;
}

.message-attachment-limit p {
    margin: 0;
}

.message-sent-attachments {
    margin: 12px 0;
    padding: 14px;
    border: 1px solid #dce4ea;
    border-radius: 7px;
    background: #f8fafb;
}

.message-sent-attachments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #344c5e;
    font-size: 12px;
}

.message-sent-attachments-header span {
    color: #7a8b98;
    font-size: 11px;
}

.message-sent-attachment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.message-sent-attachment-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 2px 9px;
    min-width: 0;
    padding: 10px;
    border: 1px solid #dbe4eb;
    border-radius: 6px;
    background: #fff;
    color: #337ab7;
}

.message-sent-attachment-card:hover {
    border-color: #a9c3d8;
    background: #f4f9fd;
    color: #286090;
    text-decoration: none;
}

.message-sent-file-icon {
    display: flex;
    grid-row: 1 / 3;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 39px;
    border-radius: 4px;
    background: #e8f2fa;
    color: #337ab7;
    font-size: 9px;
    font-weight: 700;
}

.message-sent-file-name {
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-sent-file-action {
    color: #7a8b98;
    font-size: 10px;
}

.message-sent-attachment-card.is-disabled {
    color: #7d8c98;
    opacity: .65;
}

@media (max-width: 767px) {
    .message-sent-attachment-grid {
        grid-template-columns: 1fr;
    }

    .message-attachment-existing-grid {
        grid-template-columns: 1fr;
    }
}