body .overlay {
    border-radius: 0.25rem;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 5000;
    height: 100%;
    width: 100%;
    left: 0;
    position: absolute;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Expanded sidebar: show the SCIO SVG wordmark (in .brand-text), hide the favicon */
.brand-image {
    display: none;
}

/* Collapsed (mini) sidebar: show only the small favicon, centered */
body.sidebar-collapse .app-sidebar:not(:hover) .brand-link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
}
body.sidebar-collapse .app-sidebar:not(:hover) .brand-image {
    display: inline-block;
    margin: 0 !important;
    width: 1.8rem;
    height: 1.8rem;
    opacity: 1 !important;
}

/* Collapsed (mini) sidebar: hide the SVG wordmark and the "Menu" section header */
body.sidebar-collapse .app-sidebar:not(:hover) .brand-text {
    display: none;
}
body.sidebar-collapse .app-sidebar:not(:hover) .nav-header {
    height: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
}

input.modified, textarea.modified, select.modified {
    color: blue;
    transition: background-color 0.3s ease-in-out;
}

.filter-modified {
    border-color: #007bff !important; 
    background-color: #e7f1ff !important; 
}

.form-group {
    margin-bottom: 0.2rem;
    position: relative;
}

.criterion-values-body {
    border-radius: 3px;
    overflow-y: auto;
    min-height: 150px;
    max-height: 450px;
    border: 1px solid rgba(0,0,0,.1);
    padding: 10px;
}

/*Make the small Up/Down Arrows in number inputs always visible (not only on focus)*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    opacity: 1 !important;
    display: inline-block !important;
}

div.dt-container div.dt-processing {
    height: fit-content;
    background-color: #fff;
    z-index: 1;
    top: 155px;
    padding: 0.5em 0;
}
/* DataTables 2 ships its own bubble (4-dot) processing animation, so the extra
   animated bar we used to draw with ::after is redundant - hide it. */

.sticky-thead {
    position: sticky;
    top: 55px;
    background-color: white;
    z-index: 550;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gap-3 {
    gap: 1rem !important;
}

.align-items-center {
    align-items: center;
}

.nav-link.active {
    font-weight: bold;
}

input~.copy-clipboard {
    position: absolute;
    right: 18px;
    top: 42px;
}

.copy-clipboard {
    margin-left: 5px;
}

.copy-clipboard-copied {
    color: #28a745 !important;
}

.disabled-link {
    pointer-events: none; 
    color: gray !important;
    text-decoration: none;
    cursor: default;
}

.td-package-title {
    font-style: italic;
}
.td-package-item {
    padding-left: 25px !important;
}

.dt-max-50 {
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-max-100 {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-max-150 {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-max-200 {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-max-250 {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-max-600 {
    max-width: 600px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: normal;
}

    .dt-max-600::-webkit-scrollbar {
        height: 6px;
    }

    .dt-max-600::-webkit-scrollbar-track {
        background: transparent;
    }

    .dt-max-600::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 3px;
    }

    .dt-max-600::-webkit-scrollbar-thumb:hover {
        background-color: #555;
        cursor: pointer;
    }

table.dataTable th.dt-col-narrow,
table.dataTable td.dt-col-narrow {
    max-width: 20px;
    white-space: nowrap;
}

table.dataTable th.dt-col-half,
table.dataTable td.dt-col-half {
    width: 50%;
}

.dt-copyable {
}

.dt-align-right {
    text-align: right;
    position: relative;
}

.copy-clipboard {
    color: black; 
    transition: color 0.2s;
}

.copy-clipboard.copied {
    color: green; 
}

.history-changed,
.table > :not(caption) > * > td.history-changed,
.table > :not(caption) > * > th.history-changed {
    background-color: #ffddcc !important;
    position: relative;
}

/* Bootstrap 5 paints every table cell with --bs-table-bg, which hides
   row-level contextual backgrounds (bg-danger, ...). Make cells transparent
   so the row colour shows through like in Bootstrap 4 / AdminLTE 3. */
.table > tbody > tr[class*="bg-"] > td,
.table > tbody > tr[class*="bg-"] > th {
    background-color: transparent !important;
}

    .history-changed::after {
        content: '\f0d8';
        font-family: "Font Awesome 6 Free";
        position: absolute;
        left: 40%;
        top: -10px;
        color: #449944;
        font-weight: bold;
    }

select.form-control.is-invalid {
    background-image: none !important;
    border-color: #dc3545 !important; 
}

.btn.disabled,
.btn:disabled {
    pointer-events: none;
    opacity: 0.2; 
    filter: grayscale(100%) brightness(80%);
    transform: scale(0.98); 
    transition: all 0.2s ease-in-out;
}

.btn.hidden {
    visibility: hidden !important;
}

.bg-gray-light {
    background-color: #C2DDFF !important;
}

.dt-search {
    margin-top: 0.7rem;
    margin-right: 0.4rem;
}

.expandable-body {
    background-color: #f5f5f5;
}

.cursor-pointer {
    cursor: pointer;
}

/* Remove arrows/spinners from all number inputs */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

a.active {
    font-weight: bold;
}

.fa-ban-red {
    color: #ff4444 !important;
}

.fa-check-green {
    color: #218838 !important;
}

.iframe-wrapper {
    position: relative;
    width: 100%;
    height: 500px;
}

    .iframe-wrapper iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

    .iframe-wrapper.tax-document-cancelled {
        border: 3px solid red;
        background-color: #ffeeee
    }
    /* overlay for cancelled tax document */
    .iframe-wrapper.tax-document-cancelled::before {
        content: "ZRUŠENO";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 72px;
        font-weight: 900;
        letter-spacing: 6px;
        text-transform: uppercase;
        color: rgba(200, 0, 0, 0.35);
        transform: rotate(-15deg);
        z-index: 10;
        pointer-events: none;
        user-select: none;
    }

/* Email Template Tags Styling */
.summernote-tag-menu {
    max-height: 300px;
    overflow-y: auto;
}

.summernote-tag-menu .dropdown-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.summernote-tag-menu .dropdown-item:hover {
    background-color: #f8f9fa;
}

/* Summernote Editor Customization */
.note-editor.note-frame {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.note-editor.note-frame .note-editing-area .note-editable {
    background-color: #fff;
}

.note-btn-group .note-btn {
    background-color: #fff;
    color: #1f2d3d;
}

/* Keep the toolbar glyphs visible on hover/focus. Without an explicit hover the
   button inherited a BS5/AL4 button hover state that recoloured the icon to match
   the hover background, so the icons appeared to vanish on hover. */
.note-btn-group .note-btn:hover,
.note-btn-group .note-btn:focus,
.note-toolbar .note-btn:hover,
.note-toolbar .note-btn:focus {
    color: #1f2d3d !important;
    background-color: #e9ecef;
    border-color: rgba(0, 0, 0, .196);
}

.note-btn-group .note-btn.active {
    background-color: #007bff !important;
    color: white !important;
}

.note-btn-group .note-btn.active:hover,
.note-btn-group .note-btn.active:focus {
    background-color: #007bff !important;
    color: #fff !important;
}

.note-toolbar {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

/* Tag highlighting styles */
.tag-highlight {
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Card header with btn-tool should have pointer cursor */
.card-header:has(.btn-tool) {
    cursor: pointer;
}

/* ----- AdminLTE 3 lightblue accent recreated for AdminLTE 4 / BS5 ----- */
.bg-lightblue {
    background-color: #3c8dbc !important;
    color: #fff;
}

.app-header.bg-lightblue .nav-link,
.app-header.bg-lightblue .nav-link i {
    color: #fff;
}

/* Keep the top header pinned (old site used layout-navbar-fixed) */
.app-header {
    position: sticky;
    top: 0;
    z-index: 1034;
}

/* ----- Sidebar scrolling -----
 * AdminLTE 4 relies on the OverlayScrollbars plugin to scroll the menu; without
 * it the wrapper is overflow:hidden and a long menu gets clipped. Use native
 * scrolling: stack brand + wrapper and let the wrapper take the rest + scroll. */
.app-sidebar {
    display: flex;
    flex-direction: column;
}
.app-sidebar .sidebar-wrapper {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ----- Application accent palette: lightblue #3c8dbc ----- */
:root {
    --bs-primary: #3c8dbc;
    --bs-primary-rgb: 60, 141, 188;
    --bs-link-color: #3c8dbc;
    --bs-link-color-rgb: 60, 141, 188;
    --bs-link-hover-color: #31779e;
    --bs-link-hover-color-rgb: 49, 119, 158;
    /* DataTables row selection highlight */
    --dt-row-selected: 60, 141, 188;
    /* BS5 shifted success/info; restore the AdminLTE 3 palette so the text- and bg-
       utilities (and anything reading these vars) match the previous build. */
    --bs-success: #28a745;
    --bs-success-rgb: 40, 167, 69;
    --bs-info: #17a2b8;
    --bs-info-rgb: 23, 162, 184;
}

/* Primary buttons (incl. blue buttons in DataTables) */
.btn-primary {
    --bs-btn-bg: #3c8dbc;
    --bs-btn-border-color: #3c8dbc;
    --bs-btn-hover-bg: #347ba4;
    --bs-btn-hover-border-color: #30739a;
    --bs-btn-active-bg: #30739a;
    --bs-btn-active-border-color: #2d6b90;
    --bs-btn-disabled-bg: #3c8dbc;
    --bs-btn-disabled-border-color: #3c8dbc;
    --bs-btn-focus-shadow-rgb: 60, 141, 188;
}
.btn-outline-primary {
    --bs-btn-color: #3c8dbc;
    --bs-btn-border-color: #3c8dbc;
    --bs-btn-hover-bg: #3c8dbc;
    --bs-btn-hover-border-color: #3c8dbc;
    --bs-btn-active-bg: #3c8dbc;
    --bs-btn-active-border-color: #3c8dbc;
    --bs-btn-focus-shadow-rgb: 60, 141, 188;
}

/* Success / info buttons in the AdminLTE 3 shades (BS5 darkened success, and
   made info a light cyan with black text). */
.btn-success {
    --bs-btn-bg: #28a745;
    --bs-btn-border-color: #28a745;
    --bs-btn-hover-bg: #218838;
    --bs-btn-hover-border-color: #1e7e34;
    --bs-btn-active-bg: #1e7e34;
    --bs-btn-active-border-color: #1c7430;
    --bs-btn-disabled-bg: #28a745;
    --bs-btn-disabled-border-color: #28a745;
}
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #17a2b8;
    --bs-btn-border-color: #17a2b8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #138496;
    --bs-btn-hover-border-color: #117a8b;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #117a8b;
    --bs-btn-active-border-color: #10707f;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #17a2b8;
    --bs-btn-disabled-border-color: #17a2b8;
}

/* Pagination (incl. DataTables footer) active page = lightblue */
.pagination {
    --bs-pagination-color: #3c8dbc;
    --bs-pagination-hover-color: #31779e;
    --bs-pagination-active-bg: #3c8dbc;
    --bs-pagination-active-border-color: #3c8dbc;
    --bs-pagination-focus-color: #31779e;
}

/* ----- Card accent colours back to the AdminLTE 3 / Bootstrap 4 palette -----
   AdminLTE 4 colours cards via the --lte-card-variant-bg variable (used both for
   the .card-outline top border and the solid .card-header background). BS5 shifted
   primary/success/info to new shades, so realign them. primary = app lightblue. */
.card-primary {
    --lte-card-variant-bg: #3c8dbc;
    --lte-card-variant-bg-rgb: 60, 141, 188;
}
.card-success {
    --lte-card-variant-bg: #28a745;
    --lte-card-variant-bg-rgb: 40, 167, 69;
}
.card-info {
    --lte-card-variant-bg: #17a2b8;
    --lte-card-variant-bg-rgb: 23, 162, 184;
    --lte-card-variant-color: #fff;
    --lte-card-variant-color-rgb: 255, 255, 255;
}

/* ----- Callouts back to the AdminLTE 3 look (white box, coloured left bar, shadow).
   AL4 turned them into full-bordered tinted alert boxes. ----- */
.callout {
    border: 0;
    border-left: 5px solid #e9ecef;
    border-radius: .25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    background-color: #fff;
    color: inherit;
    padding: 1rem;
    margin-top: 0;
    margin-bottom: 1rem;
}
.callout + .callout {
    margin-top: 0;
}
.callout.callout-primary { border-left-color: #3c8dbc; }
.callout.callout-secondary { border-left-color: #6c757d; }
.callout.callout-info { border-left-color: #117a8b; }
.callout.callout-success { border-left-color: #1e7e34; }
.callout.callout-warning { border-left-color: #d39e00; }
.callout.callout-danger { border-left-color: #bd2130; }

/* Sidebar active item = AdminLTE 3 "lightblue" accent (was a different blue in AL4) */
.app-sidebar .nav-link.active,
.app-sidebar .nav-link.active:hover,
.app-sidebar .nav-link.active:focus {
    background-color: #3c8dbc !important;
    color: #fff !important;
}
.app-sidebar .nav-link.active .nav-icon,
.app-sidebar .nav-link.active p {
    color: #fff !important;
}

/* Keep the user-menu avatar in the navbar compact */
.app-header .user-menu .user-image {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    margin-top: -2px;
}

/* User dropdown header (recreates AdminLTE 3 "bg-gradient-light" look).
   The markup also carries .bg-body-secondary, whose utility uses !important, so the
   gradient needs !important to win. */
.user-menu .dropdown-menu .user-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%) !important;
    color: #1f2d3d !important;
}

.user-menu .dropdown-menu .user-header img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border: 3px solid rgba(0, 0, 0, .1);
}

.user-menu .dropdown-menu .user-header p {
    margin-top: .5rem;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.4;
}

.user-menu .dropdown-menu .user-header p b {
    display: block;
    font-weight: 600;
}

.user-menu .dropdown-menu .user-header p small {
    display: block;
    font-size: .825rem;
    color: #6c757d;
}

/* User dropdown footer logout button: the markup uses a bare .btn (no variant), which
   renders transparent/unstyled. Recreate the AdminLTE 3 light footer button. */
.user-menu .dropdown-menu .user-footer .btn {
    display: block;
    width: 100%;
    padding: .75rem 1rem;
    color: #1f2d3d;
    background-color: #f4f6f9;
    border: 0;
    border-radius: 0;
}
.user-menu .dropdown-menu .user-footer .btn:hover,
.user-menu .dropdown-menu .user-footer .btn:focus {
    color: #1f2d3d;
    background-color: #e2e6ea;
}

/* ----- DataTables 2 restyled to match the AdminLTE 3 / DataTables 1 tables ----- */
/* FixedColumns switches the table to border-collapse:separate at runtime (required
   for sticky cells). The DT2 BS5 reset only zeroes border-spacing on tables that also
   carry the .table class, so our "display" tables fall back to the browser default
   (2px) and show thin white gaps around the striped rows / under the header. Force
   border-spacing:0 so the stripes meet edge-to-edge with no gap. */
table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* With scrollX the DT2 inner tables size to content, leaving the grid squeezed to
   the left. min-width:100% stretches narrow tables to fill the card (columns are
   distributed proportionally), while genuinely wide tables still scroll. */
.dt-scroll-head table.dataTable,
.dt-scroll-body table.dataTable {
    min-width: 100% !important;
}

/* Header: light grey fill + clear bottom border, like the previous build */
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    white-space: nowrap;
}

/* Row separators + hover, mirroring .table-bordered/.table-hover */
table.dataTable > tbody > tr > td,
table.dataTable > tbody > tr > th {
    border-top: 1px solid #e9ecef;
}

/* Odd/even striping (the BS5 DataTables build only stripes .table-striped tables,
   but our tables use the "display" class, so add it back explicitly).
   Use OPAQUE background colours (not rgba / box-shadow): a solid background fills
   the whole cell edge-to-edge (incl. under the borders), so there is no uncoloured
   gap around the stripe, and it stays opaque on pinned cells (FixedColumns) so the
   scrolled content underneath doesn't show through. #f2f2f2 == rgba(0,0,0,.05)/white. */
table.dataTable > tbody > tr:nth-child(odd) > td,
table.dataTable > tbody > tr:nth-child(odd) > th {
    background-color: #f2f2f2;
}
table.dataTable > tbody > tr:hover > td,
table.dataTable > tbody > tr:hover > th {
    background-color: #ececec;
}

/* FixedColumns: the pinned cells (action buttons / first column) must ALWAYS be
   opaque, otherwise horizontally-scrolled content from other columns shows through
   under them. Force an opaque background for every row state (incl. matching the
   stripe / hover colours). */
table.dataTable > thead > tr > .dtfc-fixed-start,
table.dataTable > thead > tr > .dtfc-fixed-end {
    background-color: #f8f9fa !important;
}
table.dataTable > tbody > tr > .dtfc-fixed-start,
table.dataTable > tbody > tr > .dtfc-fixed-end {
    background-color: #fff !important;
}
table.dataTable > tbody > tr:nth-child(odd) > .dtfc-fixed-start,
table.dataTable > tbody > tr:nth-child(odd) > .dtfc-fixed-end {
    background-color: #f2f2f2 !important;
}
table.dataTable > tbody > tr:hover > .dtfc-fixed-start,
table.dataTable > tbody > tr:hover > .dtfc-fixed-end {
    background-color: #ececec !important;
}

/* DataTables 2 auto-detects column types and right-aligns numeric/date columns
   (and reverses the header layout so the sort icon sits on the left). DataTables 1
   left-aligned everything, so restore left alignment - except columns explicitly
   marked .dt-align-right (e.g. money amounts), which stay right. */
table.dataTable > thead > tr > th.dt-type-numeric:not(.dt-align-right),
table.dataTable > thead > tr > th.dt-type-date:not(.dt-align-right),
table.dataTable > tbody > tr > td.dt-type-numeric:not(.dt-align-right),
table.dataTable > tbody > tr > td.dt-type-date:not(.dt-align-right) {
    text-align: left;
}
table.dataTable > thead > tr > th.dt-type-numeric div.dt-column-header,
table.dataTable > thead > tr > th.dt-type-date div.dt-column-header,
table.dataTable > tbody > tr > td.dt-type-numeric div.dt-column-header,
table.dataTable > tbody > tr > td.dt-type-date div.dt-column-header {
    flex-direction: row;
}

/* Compact cell padding to match the old "compact" density */
table.dataTable.compact > thead > tr > th,
table.dataTable.compact > tbody > tr > td {
    padding: .35rem .5rem;
}

/* Sort icons: DataTables 2 draws two small triangles; AdminLTE 3 used Font Awesome
   (fa-sort / fa-sort-up / fa-sort-down). Recreate the Font Awesome look. */
table.dataTable thead > tr > th .dt-column-order::after,
table.dataTable thead > tr > td .dt-column-order::after {
    display: none !important;
}
table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order::before,
table.dataTable thead > tr > th.dt-orderable-desc .dt-column-order::before,
table.dataTable thead > tr > td.dt-orderable-asc .dt-column-order::before,
table.dataTable thead > tr > td.dt-orderable-desc .dt-column-order::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
    content: "\f0dc" !important;
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    left: 0 !important;
    transform: translateY(-50%);
    line-height: 1 !important;
    opacity: .4;
}
table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order::before,
table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order::before {
    content: "\f0de" !important;
    opacity: .9;
}
table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order::before,
table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order::before {
    content: "\f0dd" !important;
    opacity: .9;
}

/* ----- Content spacing closer to AdminLTE 3 (tighter top/side padding) ----- */
.app-main > .app-content-header {
    padding: .75rem .5rem .25rem;
}

.app-main > .app-content {
    padding: .25rem .5rem 1rem;
}

/* ----- Expandable tables (AdminLTE 3 widget, dropped in AL4) ----- */
[data-widget="expandable-table"] {
    cursor: pointer;
}
[data-widget="expandable-table"] i {
    transition: transform .3s linear;
}
.expandable-body > td {
    padding: 0 !important;
    width: 100%;
    /* BS5 paints every cell with var(--bs-table-bg) via ".table>:not(caption)>*>*",
       which hid the grey background that .expandable-body sets on the <tr>. Re-apply
       it on the cell so the expanded detail block stays shaded like in AdminLTE 3. */
    background-color: #f5f5f5 !important;
}
.expandable-body > td > div,
.expandable-body > td > p {
    padding: .75rem;
}
.expandable-body .table {
    width: calc(100% - .75rem);
    margin: 0 0 0 .75rem;
}
.expandable-body .table tr:first-child td,
.expandable-body .table tr:first-child th {
    border-top: none;
}
.table-hover tbody tr.expandable-body:hover {
    background-color: inherit !important;
}

/* ----- Mailbox attachments (AdminLTE 3 widget, dropped in AL4) -----
   Used by the e-mail preview attachment box (e.g. EmailQueue/Detail). */
.mailbox-attachments {
    padding-left: 0;
    list-style: none;
    margin: 0;
}
.mailbox-attachments li {
    border: 1px solid #eee;
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
    width: 200px;
}
.mailbox-attachment-name {
    color: #666;
    font-weight: 700;
}
.mailbox-attachment-icon,
.mailbox-attachment-info,
.mailbox-attachment-size {
    display: block;
}
.mailbox-attachment-info {
    background-color: #f8f9fa;
    padding: 10px;
}
.mailbox-attachment-size {
    color: #999;
}
.mailbox-attachment-size,
.mailbox-attachment-size > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mailbox-attachment-icon {
    color: #666;
    font-size: 65px;
    max-height: 132.5px;
    padding: 20px 10px;
    text-align: center;
    overflow: hidden;
}
.mailbox-attachment-icon.has-img {
    padding: 0;
}
.mailbox-attachment-icon.has-img > img {
    height: auto;
    max-width: 100%;
}