.message-attachment-panel,
.record-storage-panel {
    overflow: hidden;
    border: 1px solid #d9e3eb;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(31, 51, 70, .06);
}

.message-attachment-header,
.record-storage-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding: 20px 22px 16px;
    background: #f8fafc;
}

.message-attachment-kicker,
.record-storage-kicker {
    display: block;
    margin-bottom: 4px;
    color: #337ab7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
}

.message-attachment-header h4,
.record-storage-header h4 {
    margin: 0 0 5px;
    color: #263b4e;
    font-size: 16px;
    font-weight: 700;
}

.message-attachment-header p,
.record-storage-header p {
    margin: 0;
    color: #647787;
    font-size: 12px;
    line-height: 1.6;
}

.message-attachment-usage,
.record-storage-usage {
    flex: 0 0 230px;
    color: #718391;
    font-size: 11px;
}

.message-attachment-usage > span,
.message-attachment-usage > strong,
.record-storage-usage > span,
.record-storage-usage > strong {
    display: block;
}

.message-attachment-usage > strong,
.record-storage-usage > strong {
    margin-top: 3px;
    color: #2d4355;
    font-size: 16px;
}

.message-attachment-usage > strong small,
.record-storage-usage > strong small {
    color: #6f8190;
    font-size: 11px;
    font-weight: 400;
}

.message-attachment-meter,
.record-storage-meter {
    height: 6px;
    margin: 7px 0 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #dfe7ed;
}

.message-attachment-meter span,
.record-storage-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #337ab7;
}

.message-attachment-panel.is-limit-reached .message-attachment-meter span,
.record-storage-panel.is-limit-reached .record-storage-meter span {
    background: #c94c45;
}

.message-attachment-specs,
.record-storage-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 14px 22px 0;
}

.message-attachment-specs span,
.record-storage-specs span {
    padding: 5px 10px;
    border: 1px solid #dce5ed;
    border-radius: 999px;
    background: #fff;
    color: #506779;
    font-size: 11px;
}

.message-attachment-formats,
.message-attachment-note,
.record-storage-formats {
    margin: 9px 22px 14px;
    color: #697c8b;
    font-size: 11px;
    line-height: 1.7;
}

.message-attachment-formats strong,
.record-storage-formats strong {
    margin-right: 7px;
    color: #40586b;
}

.message-attachment-upload-area,
.record-storage-upload-area {
    padding: 0 22px 18px;
}

.message-attachment-dropzone,
.record-storage-dropzone {
    margin: 0;
    padding: 22px 20px 20px;
    border: 2px dashed #b8c8d5;
    border-radius: 8px;
    background: #fbfcfd;
    text-align: center;
}

.message-attachment-dropzone.is-storage-dragover,
.record-storage-dropzone.is-storage-dragover {
    border-color: #337ab7;
    background: #eef7ff;
}

.message-attachment-dropzone-icon,
.record-storage-dropzone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #e5f0f9;
    color: #337ab7;
    font-size: 25px;
    line-height: 1;
}

.message-attachment-dropzone h5,
.record-storage-dropzone h5 {
    margin: 0 0 4px;
    color: #2e4558;
    font-size: 14px;
    font-weight: 700;
}

.message-attachment-dropzone p,
.record-storage-dropzone p {
    margin: 0 0 12px;
    color: #788996;
    font-size: 12px;
}

.message-attachment-picker,
.record-storage-picker {
    min-width: 145px;
    margin: 0;
    cursor: pointer;
}

.message-attachment-picker input[type="file"],
.record-storage-picker input[type="file"] {
    display: none;
}

.message-attachment-upload-area > .storage-upload-overview,
.message-attachment-upload-area > .storage-upload-list,
.record-storage-upload-area > .storage-upload-overview,
.record-storage-upload-area > .storage-upload-list {
    width: 100%;
}

.message-attachment-error,
.message-attachment-limit,
.record-storage-error {
    padding: 9px 12px;
    border: 1px solid #efc6c3;
    border-radius: 5px;
    background: #fff7f6;
    color: #b13f39;
    font-size: 12px;
}

.message-attachment-error,
.record-storage-error {
    margin: 8px 0;
}

@media (max-width: 767px) {
    .message-attachment-header,
    .record-storage-header {
        display: block;
    }

    .message-attachment-usage,
    .record-storage-usage {
        margin-top: 14px;
    }
}