.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #aaa;
    border-radius: 10px !important;
    padding: 5px;
    background-color: transparent;
    margin-left: 3px;
}

/* Global DataTable row height styling - excludes AuditLog table */
/* Using high specificity to override DataTables default styles */
table.dataTable:not(#auditLogTable) > tbody > tr > th,
table.dataTable:not(#auditLogTable) > tbody > tr > td,
table.dataTable.display:not(#auditLogTable) > tbody > tr > th,
table.dataTable.display:not(#auditLogTable) > tbody > tr > td {
    padding: 3px 10px !important;
    font-size: 13px !important;
    line-height: 16px !important;
    vertical-align: middle !important;
}

table.dataTable:not(#auditLogTable) tbody th,
table.dataTable:not(#auditLogTable) tbody td,
table.dataTable.display:not(#auditLogTable) tbody th,
table.dataTable.display:not(#auditLogTable) tbody td {
    padding: 3px 10px !important;
    font-size: 13px !important;
    line-height: 16px !important;
    vertical-align: middle !important;
}

table.dataTable:not(#auditLogTable) tbody td .btn-edit,
table.dataTable.display:not(#auditLogTable) tbody td .btn-edit {
    padding: 0 6px !important;
    height: 28px !important;
    line-height: 22px !important;
}

table.dataTable:not(#auditLogTable) tbody td .btn-edit .material-icons,
table.dataTable.display:not(#auditLogTable) tbody td .btn-edit .material-icons {
    font-size: 16px !important;
    line-height: 22px !important;
}

#cover {
    /*background: #222 url('https://unsplash.it/1920/1080/?random') center center no-repeat;*/
    /*background: #222 url(/Content/images/bg2.png);*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
   /* display: flex;*/
    position: relative;
}

.bd-example-modal-lg .modal-dialog {
    display: table;
    position: relative;
    margin: 0 auto;
    top: calc(50% - 24px);
}

    .bd-example-modal-lg .modal-dialog .modal-content {
        background-color: transparent;
        border: none;
    }

.files input {
    outline: 2px dashed #92b0b3;
    outline-offset: -10px;
    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
    padding: 120px 0px 85px 35%;
    text-align: center !important;
    margin: 0;
    width: 100% !important;
}

    .files input:focus {
        outline: 2px dashed #92b0b3;
        outline-offset: -10px;
        -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
        transition: outline-offset .15s ease-in-out, background-color .15s linear;
        border: 1px solid #92b0b3;
    }

.files {
    position: relative
}

    .files:after {
        pointer-events: none;
        position: absolute;
        top: 80px;
        left: 0;
        width: 50px;
        right: 0;
        height: 56px;
        content: "";
        background-image: url('images/109612.png');
        display: block;
        margin: 0 auto;
        background-size: 100%;
        background-repeat: no-repeat;
    }

.color input {
    background-color: #f1f1f1;
}

.files:before {
    position: absolute;
    bottom: 30px;
    left: 0;
    pointer-events: none;
    width: 100%;
    right: 0;
    content: " or drag it here. ";
    display: block;
    margin: 0 auto;
    color: #2ea591;
    font-weight: 600;
    text-align: center;
}

/* Upload drop area fixes (dev260826002940). Bootstrap's .form-control gives the
   file input a fixed ~38px height, far less than the 205px of padding above, so
   the native "Choose Files / No file chosen" text had no box of its own and
   drifted onto the icon and the "or drag it here" caption. Let the height follow
   the padding so the three pieces keep their own space at every width. */
.files input[type=file] {
    height: auto !important;
}

@media (max-width: 575.98px) {
    /* The 35% left indent leaves the native control too little room on phones. */
    .files input[type=file] {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (hover: none) and (pointer: coarse) {
    /* Touch devices can't drag files in, so drop the caption there. */
    .files:before {
        content: none;
    }
}

.dropdown-toggle::after {
    display: none !important;
    position: unset !important;
}
/* .capitalize-all {

    } */

table {
    width: 100% !important;
}
.grayout {
    opacity: 0.4;
    filter: alpha(opacity=40);
    background-color: #b1b1b1;
}

/* --------------------------------------------------------------------------
   Mobile "card per record" for tables tagged .dt-cards (dev260826002940).
   The patient-profile DataTables build (1.11.5) has no Responsive plugin, so
   instead of a JS extension these tables are restyled into stacked cards here,
   with each cell labelled from its column header (data-label, stamped by
   labelizeCards() in custom.js). Only applies under the mobile breakpoint, so
   desktop/tablet layouts are completely unaffected.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    table.dt-cards {
        display: block !important; /* a display:table never shrinks below its content */
        width: 100% !important;
        border: 0 !important;
    }

    table.dt-cards thead {
        display: none !important; /* the header becomes each cell's data-label */
    }

    table.dt-cards tbody,
    table.dt-cards > tbody > tr {
        display: block !important;
        width: 100% !important;
    }

    table.dt-cards > tbody > tr {
        border: 1px solid #e9ecef !important;
        border-radius: .375rem;
        margin-bottom: .5rem;
        padding: .15rem .5rem;
        background: #f8fafb;
    }

    table.dt-cards > tbody > tr > td {
        display: flex !important;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        width: auto !important;
        text-align: right;
        border: 0 !important;
        border-bottom: 1px solid #eceff1 !important;
        padding: .45rem .1rem !important;
        white-space: normal !important;
        flex-wrap: wrap;
        min-width: 0;
        overflow-wrap: anywhere;
    }

        table.dt-cards > tbody > tr > td[hidden] {
            display: none !important; /* keep DataTables-hidden columns hidden */
        }

        table.dt-cards > tbody > tr > td:last-child {
            border-bottom: 0 !important;
        }

        table.dt-cards > tbody > tr > td[data-label]::before {
            content: attr(data-label);
            font-weight: 600;
            color: #6c757d;
            text-align: left;
            padding-right: 1rem;
        }

        /* Account Links action cell (View Profile / Edit / Delete): label on its
           own line, buttons centred beneath it instead of spilling out. */
        #accountLinksTable.dt-cards > tbody > tr > td:last-child {
            justify-content: center;
            gap: .35rem;
        }

            #accountLinksTable.dt-cards > tbody > tr > td:last-child::before {
                flex-basis: 100%;
                text-align: center;
                padding-right: 0;
            }

        /* DataTables "No data available" row -> clean centered empty card. */
        table.dt-cards > tbody > tr > td.dataTables_empty {
            display: block !important;
            text-align: center;
            color: #6c757d;
            border-bottom: 0 !important;
        }
}