@charset "utf-8";
/* CSS Document */
@import url('reset.css') screen;
@import url('layout.css') screen;


body {
    background-color: #e6e6e6;
    margin: 0;
    padding: 0;
    font-family: SansRegular;
    font-size: 12px;
    color: #6b6c6b;
}

a {
    cursor: pointer;
}

.font-bold {
    font-weight: bold;
}

.round_box_title {
    background: url(../images/arrow_head.gif) no-repeat right;
    height: 90px;
    padding-top: 20px;
}

    .round_box_title img {
        vertical-align: middle;
        margin-bottom: 12px;
        margin-top: 6px;
    }

h1 {
    color: #424342;
    text-transform: uppercase;
    font-family: SansSemiBold;
    font-size: 13px;
    display: inline-block;
    font-size: 13px;
}

.round_box_title h1 {
    padding-top: 6px;
    margin-left: 4px;
}

h2 {
    color: #424342;
    text-transform: uppercase;
    font-family: SansSemiBold;
    font-size: 13px;
    display: inline-block;
    font-size: 12px;
    padding-right: 12px;
}

h3 {
    color: #424342;
    font-size: 24px;
    text-transform: uppercase;
    display: block;
    padding-bottom: 30px;
}

h4 {
    color: #424342;
    font-size: 15px;
    text-transform: uppercase;
    display: block;
}

strong {
    font-family: SansSemiBold;
    color: #424342;
}

.home_appointment_details p, .patient_address p {
    padding-top: 6px;
}

.line_height_small p {
    padding-top: 2px;
}


.login_info a {
    color: #538e4a;
    text-transform: uppercase;
    text-decoration: underline;
    font-family: SansSemiBold;
    font-size: 10px;
}

    .login_info a:hover {
        text-decoration: none;
    }

.register a {
    color: #1d5a13;
    text-transform: uppercase;
    text-decoration: underline;
    font-family: SansSemiBold;
    font-size: 11px;
    background: url(../images/arrow_green.gif) no-repeat top left;
    padding-left: 18px;
}

    .register a:hover {
        text-decoration: none;
    }


a.arrow_head {
    color: #1d5a13 !important;
    text-transform: uppercase;
    text-decoration: underline;
    font-family: SansSemiBold;
    font-size: 11px;
    background: url(../images/arrow_green.gif) no-repeat top left;
    padding-left: 18px;
}

    a.arrow_head:hover {
        text-decoration: none;
    }

.arrow_head_warning {
    color: #db5a22;
    text-transform: uppercase;
    text-decoration: underline;
    font-family: SansSemiBold;
    font-size: 11px;
    background: url(../images/arrow_brown.gif) no-repeat top left;
    padding-left: 18px;
}

    .arrow_head_warning:hover {
        text-decoration: none;
    }

a.arrow_head_warning {
    color: #db5a22;
    text-transform: uppercase;
    text-decoration: underline;
    font-family: SansSemiBold;
    font-size: 11px;
    background: url(../images/arrow_brown.gif) no-repeat top left;
    padding-left: 18px;
}

    a.arrow_head_warning:hover {
        text-decoration: none;
    }

input[type="text"] {
    border: 1px solid #ced1d7;
    background: #fff;
    border-radius: 4px;
}

    input[type="text"]:disabled {
        background-color: #ced1d7;
    }

textarea {
    border: 1px solid #ced1d7;
    background: #fff;
    border-radius: 4px;
}

select {
    border: 1px solid #ced1d7;
    background: transparent;
    width: 100px;
    height: 20px;
}

input[type=button]:hover {
    cursor: pointer;
}

input[type=text]:focus, textarea:focus {
    box-shadow: 0 0 5px rgba(192, 247, 97, 1);
    border: 1px solid rgba(186, 209, 183, 1);
}

#patientcode {
    width: 95px;
}

#patientname {
    width: 385px;
}

.round_box_rightcontent {
    font-size: 11px;
    font-family: SansSemiBold;
    color: #676867;
    text-transform: uppercase;
}

.site_navigation {
    font-size: 11px;
    font-family: SansSemiBold;
    /*color: #ff45f;*/
    text-transform: uppercase;
    margin: 0 auto;
    width: 1280px;
}

    .site_navigation ul:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

.site_navigation {
    list-style: none;
}

    .site_navigation li {
        display: inline;
    }

        .site_navigation li a {
            color: #fff;
            padding: 15px;
            background: #80b24a;
            text-decoration: none;
            float: left;
            position: relative;
            margin-left: 1px;
            top: 1px;
        }

            .site_navigation li a:hover {
                background: #538e4a;
            }


            .site_navigation li a.selected:after {
                content: '';
                display: block;
                position: absolute;
                left: 40%;
                top: 100%;
                width: 0;
                height: 0;
                border-top: 10px solid #538e4a;
                border-bottom: 10px solid transparent;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
            }

        .site_navigation li.patientinfo a.selected {
            background: url(../images/sitemenu_patieninfo_hover.gif) no-repeat 4px 2px #538e4a;
            padding-left: 30px;
        }

        .site_navigation li.patientinfo a:hover {
            background: url(../images/sitemenu_patieninfo_hover.gif) no-repeat 4px 2px #538e4a;
            padding-left: 30px;
        }

        .site_navigation li.patientinfo a {
            background: url(../images/sitemenu_patieninfo.gif) no-repeat 4px 2px #80b24a;
            padding-left: 30px;
        }

        .site_navigation li.labtest a.selected {
            background: url(../images/sitemenu_lab_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.labtest a:hover {
            background: url(../images/sitemenu_lab_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.labtest a {
            background: url(../images/sitemenu_lab.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }


        .site_navigation li.pharmacy a.selected {
            background: url(../images/sitemenu_pharmacy_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.pharmacy a:hover {
            background: url(../images/sitemenu_pharmacy_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.pharmacy a {
            background: url(../images/sitemenu_pharmacy.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }




        .site_navigation li.surgery a.selected {
            background: url(../images/sitemenu_surgery_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.surgery a:hover {
            background: url(../images/sitemenu_surgery_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.surgery a {
            background: url(../images/sitemenu_surgery.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }

        .site_navigation li.ot a.selected {
            background: url(../images/sitemenu_ot_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.ot a:hover {
            background: url(../images/sitemenu_ot_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.ot a {
            background: url(../images/sitemenu_ot.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }


        .site_navigation li.doctor a.selected {
            background: url(../images/sitemenu_doctor_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.doctor a:hover {
            background: url(../images/sitemenu_doctor_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.doctor a {
            background: url(../images/sitemenu_doctor.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }



        .site_navigation li.expense a.selected {
            background: url(../images/sitemenu_expense_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.expense a:hover {
            background: url(../images/sitemenu_expense_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.expense a {
            background: url(../images/sitemenu_expense.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }



        .site_navigation li.report a.selected {
            background: url(../images/sitemenu_report_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.report a:hover {
            background: url(../images/sitemenu_report_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.report a {
            background: url(../images/sitemenu_report.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }

        .site_navigation li.misreport a.selected {
            background: url(../images/sitemenu_report_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.misreport a:hover {
            background: url(../images/sitemenu_report_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.misreport a {
            background: url(../images/sitemenu_report.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }


        .site_navigation li.purchase a.selected {
            background: url(../images/sitemenu_purchase_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.purchase a:hover {
            background: url(../images/sitemenu_purchase_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.purchase a {
            background: url(../images/sitemenu_purchase.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }

        .site_navigation li.hrm a.selected {
            background: url(../images/sitemenu_purchase_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.hrm a:hover {
            background: url(../images/sitemenu_purchase_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.hrm a {
            background: url(../images/sitemenu_purchase.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }

        .site_navigation li.appointment a.selected {
            background: url(../images/sitemenu_appointment_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.appointment a:hover {
            background: url(../images/sitemenu_appointment_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.appointment a {
            background: url(../images/sitemenu_appointment.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }


        .site_navigation li.nurse a.selected {
            background: url(../images/sitemenu_nurse_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.nurse a:hover {
            background: url(../images/sitemenu_nurse_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.nurse a {
            background: url(../images/sitemenu_nurse.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }

        .site_navigation li.bloodbankmanagement a:hover {
            background: url(../images/sitemenu_blood_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.bloodbankmanagement a.selected {
            background: url(../images/sitemenu_blood_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.bloodbankmanagement a {
            background: url(../images/sitemenu_blood.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }


        .site_navigation li.bedsetup a.selected {
            background: url(../images/sitemenu_bed_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 48px;
        }

        .site_navigation li.bedsetup a:hover {
            background: url(../images/sitemenu_bed_hover.gif) no-repeat 6px 2px #538e4a;
        }

        .site_navigation li.bedsetup a {
            background: url(../images/sitemenu_bed.gif) no-repeat 6px 2px #80b24a;
            padding-left: 48px;
        }

        .site_navigation li.othercharges a {
            background: url(../images/sitemenu_othercharges.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }

            .site_navigation li.othercharges a.selected {
                background: url(../images/sitemenu_othercharges_hover.gif) no-repeat 6px 2px #538e4a;
                padding-left: 32px;
            }

            .site_navigation li.othercharges a:hover {
                background: url(../images/sitemenu_othercharges_hover.gif) no-repeat 6px 2px #538e4a;
            }

        .site_navigation li.billing a {
            background: url(../images/sitemenu_billing.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }

            .site_navigation li.billing a.selected {
                background: url(../images/sitemenu_billing_hover.gif) no-repeat 6px 2px #538e4a;
                padding-left: 32px;
            }

            .site_navigation li.billing a:hover {
                background: url(../images/sitemenu_billing_hover.gif) no-repeat 6px 2px #538e4a;
            }

        .site_navigation li.billing a {
            background: url(../images/sitemenu_billing.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }



        .site_navigation li.configuration a.selected {
            background: url(../images/sitemenu_confg_hover.gif) no-repeat 6px 2px #538e4a;
            padding-left: 32px;
        }

        .site_navigation li.configuration a:hover {
            background: url(../images/sitemenu_confg_hover.gif) no-repeat 6px 2px #538e4a;
        }

        .site_navigation li.configuration a {
            background: url(../images/sitemenu_confg.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }

        .site_navigation li.admin a:hover {
            background: url(../images/sitemenu_admin_hover.gif) no-repeat 6px 2px #538e4a;
        }

        .site_navigation li.admin a {
            background: url(../images/sitemenu_admin.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }

            .site_navigation li.admin a.selected {
                background: url(../images/sitemenu_admin_hover.gif) no-repeat 6px 2px #538e4a;
                padding-left: 32px;
            }


        .site_navigation li.generalstore a:hover {
            background: url(../images/sitemenu_generalstore_hover.gif) no-repeat 6px 2px #538e4a;
        }

        .site_navigation li.generalstore a {
            background: url(../images/sitemenu_generalstore.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }

            .site_navigation li.generalstore a.selected {
                background: url(../images/sitemenu_generalstore_hover.gif) no-repeat 6px 2px #538e4a;
                padding-left: 32px;
            }

        .site_navigation li.package a:hover {
            background: url(../images/sitemenu_generalstore_hover.gif) no-repeat 6px 2px #538e4a;
        }

        .site_navigation li.package a {
            background: url(../images/sitemenu_generalstore.gif) no-repeat 6px 2px #80b24a;
            padding-left: 32px;
        }

            .site_navigation li.package a.selected {
                background: url(../images/sitemenu_generalstore_hover.gif) no-repeat 6px 2px #538e4a;
                padding-left: 32px;
            }

.site_navigation_secondary {
    font-size: 11px;
    font-family: SansSemiBold;
    color: #ff45f;
    text-transform: uppercase;
    /*margin:0 auto;*/
    width: 100%;
    text-align: center;
    height: 56px;
    background: #d8e5d5;
    /* border-top:1px solid #c5d3b7;*/
    border-bottom: 1px solid #c5d3b7;
}

    .site_navigation_secondary ul:after {
        content: ".";
        display: inline;
        height: 0;
        clear: both;
        visibility: hidden;
    }


    .site_navigation_secondary ul {
        margin: 2px auto;
        line-height: 1.4;
        padding-left: 0;
        padding-top: 12px;
    }


        .site_navigation_secondary ul li {
            display: inline-block;
            text-align: center;
            border-left: 1px solid #aabe97;
            /*tanvir*/
            padding: 0 10px 0 10px;
        }



            .site_navigation_secondary ul li a {
                text-decoration: none;
                color: #4f6d56;
                display: table-cell;
                height: 30px;
                vertical-align: middle;
                width: 120px;
            }

    .site_navigation_secondary li a:hover {
        color: #b7651d;
    }

    .site_navigation_secondary ul li:first-child {
        border: none;
    }

    .site_navigation_secondary ul li a.active {
        text-decoration: none;
        color: #b7651d;
    }



.site_navigation li.account a.selected {
    background: url(../images/sitemenu_account_hover.gif) no-repeat 6px 2px #538e4a;
    padding-left: 32px;
}

.site_navigation li.account a:hover {
    background: url(../images/sitemenu_account_hover.gif) no-repeat 6px 2px #538e4a;
    padding-left: 32px;
}

.site_navigation li.account a {
    background: url(../images/sitemenu_account.gif) no-repeat 6px 2px #80b24a;
    padding-left: 32px;
}




#itemname {
    margin-top: 2px;
    margin-bottom: 2px;
    width: 200px;
    height: 17px;
    color:green;
}
#itemCode {
    margin-top: 2px;
    margin-bottom: 2px;
    width: 200px;
    height: 17px;
    color: blue;
}

.add_item_input {
    margin-left: 20px;
    margin-bottom: 5px;
    margin-top: 30px;
    float: left;
}

.add_item_from_prescription {
    margin-left: 20px;
    padding-left: 20px;
    float: left;
    /*border-left: 1px dotted #b9d0c4;*/
    /*height: 10px;*/
}

    .add_item_from_prescription input[type="text"] .add_item_input select {
        height: 25px;
    }

.floatleft {
    float: left;
}

.floatright {
    float: right;
}


.itemButton {
    float: left;
    margin-top: 2px;
    margin-left: 2px;
}

.item_grid {
    margin-top: 12px;
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 22px;
}

    .item_grid .quantity {
        width: 80px;
    }

    .item_grid .referrer {
        width: 80px;
    }

    .item_grid .amount {
        width: 80px;
    }

    .item_grid .reportdeliverydate {
        width: 120px;
    }

    .item_grid .datepickicon {
        vertical-align: middle;
    }

    .item_grid .quantity {
        width: 40px;
    }

    .item_grid .cost {
        width: 80px;
    }

    .item_grid .discount {
        width: 80px;
    }

    .item_grid .cost_after_discount {
        width: 80px;
    }

    .item_grid .referrer_after_discount {
        width: 80px;
    }

    .item_grid .cost {
        width: 80px;
    }

.round_title_margin h1 {
    margin-top: 25px;
}

img {
    vertical-align: middle;
}

.line_item_total_calc {
    margin-top: 12px;
}

.border_bottom {
    border-bottom: 1px solid #b9d0c4;
    padding: 6px;
}

.success_message {
    font-size: 12px;
    margin-top: 2px;
    margin-left: 10px;
    color: #06a412
}

.warning_message {
    font-size: 13px;
    margin-top: 2px;
    margin-left: 10px;
    color: Red;
}

.modal_menu {
    color: #c66c1c;
    font-size: 11px;
    font-family: SansSemiBold;
    text-transform: uppercase;
}

    .modal_menu a.active {
        color: #000;
        text-decoration: none;
    }

    .modal_menu a {
        text-decoration: underline;
        color: #c66c1c;
    }

.modal_header {
    border-bottom: 1px solid #cbd8d1;
}

div.payment_input_box {
    padding: 20px;
    padding-top: 20px;
}

.payment_input_box .payment_amount {
    width: 140px;
}

.payment_input_box .payment_method {
    width: 145px;
}

.payment_input_box .copayer_amount {
}

.payment_input_box > div {
    height: 12px;
}

.space {
    padding: 5px;
}

.status_green {
    color: #538e4a;
    font-size: 11px;
    font-family: SansSemiBold;
    text-transform: uppercase;
}

.status_red {
    color: #e30d21;
    font-size: 11px;
    font-family: SansSemiBold;
    text-transform: uppercase;
}

    .status_red p {
        text-decoration: none;
        display: inline-block;
    }

.status_yellow {
    color: #9db713;
    font-size: 11px;
    font-family: SansSemiBold;
    text-transform: uppercase;
}

    .status_yellow p {
        text-decoration: none;
        display: inline-block;
    }

.status_brown {
    color: #c66c1c;
    font-size: 11px;
    font-family: SansSemiBold;
    text-transform: uppercase;
}

.status_blue {
    color: #26a6e1;
    font-size: 11px;
    font-family: SansSemiBold;
    text-transform: uppercase;
}

.status_black {
    color: #000000;
    font-size: 11px;
    font-family: SansSemiBold;
    /*text-transform: uppercase;*/
}

table td.padding_left60 {
    padding-left: 60px;
    padding-bottom: 30px;
}

a.fa-search:hover, a.fa-search:focus {
    text-decoration: none;
}


body.datepicker-dropdown {
    z-index: 99999 !important;
}

input[type="text"]#doctorName {
    width: 150px;
    display: inline;
}

input[type="text"]#nonPaidDoctorName {
    width: 150px;
    display: inline;
}





.button {
    font-size: 1em;
    padding: 10px;
    color: #fff;
    border: 2px solid orange;
    border-radius: 20px/50px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-out;
}

    .button:hover {
        background: orange;
    }

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
    z-index: 9;
}

    .overlay:target {
        visibility: visible;
        opacity: 1;
    }

.popup {
    margin: 170px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 30%;
    position: relative;
}

.popupInvoice {
    margin: 170px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 45%;
    position: relative;
}

.popup h2 {
    margin-top: 0;
    color: #333;
}

.popupLight {
    border-radius: 4px;
    border: 1px solid #b9d0c4;
    box-shadow: 2px 2px 6px -1px rgba(0, 0, 0, 0.55);
    z-index: 9999;
}

    .popupLight textarea {
        border: 1px solid #b9d0c4;
    }


    .popupLight h2 {
        margin-top: 0;
        color: #333;
        font-family: Tahoma, Arial, sans-serif;
        padding: 10px;
        margin-left: 10px;
        font-weight: bold;
    }


    .popupLight .close {
        float: right;
        margin-right: 10px;
        margin-top: 10px;
    }



.popup .close {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

    .popup .close:hover {
        color: orange;
    }

.popup .content_text {
    overflow: hidden;
}

.popupInvoice .close {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

    .popupInvoice .close:hover {
        color: orange;
    }

.popupInvoice .content_text {
    overflow: hidden;
}

.padding40 {
    padding: 40px;
}

.padding20 {
    padding: 40px;
}

.padding40 div {
    padding: 4px;
}

.top_space {
    margin-top: 25px;
    display: block;
}

.refund_item td {
    text-decoration: line-through;
    color: #c46516;
}

/* Bank Information: a blood bag with no PatientId - general stock, available to
   any patient. A bag collected for one patient keeps the normal colour.

   Loud on purpose. Whether a unit is reserved or free to give to anyone is the
   first thing read off this grid, and a quiet tint of the body colour was being
   read as "a link" rather than as a fact about the bag. Blue stays - people have
   started to learn it - but saturated and bold, and clear of the orange refund
   rows and the purple organisation donors.

   On td rather than tr for the same reason .refund_item is: a colour set on the
   row alone loses to the cell rules. The action links keep link_brown. */
.general_stock_item td {
    color: #0b5ed7;
    font-weight: 700;
}

/* An organisation donor in the donor list. Stronger than the other row colours
   on purpose - this one separates two kinds of row that sit next to each other
   in the same grid, rather than marking a state a row has moved into. */
.organisation_donor td {
    color: #7b1fa2;
    font-weight: bold;
}

/* Accept All sits on its own line above the invoice list, hard right, with air
   above it so it is not read as part of the filter row. */
/* Free Ticket and GENERATE TICKET, which are disabled while the form is
   invalid. Their colours are set inline, so the browser's own disabled
   styling loses and a dead button looked exactly like a live one - clicking
   it did nothing, said nothing, and there was no way to tell from the screen
   that it was the form and not the click. !important because inline styles
   outrank a stylesheet otherwise. */
.ticket_action_button[disabled] {
    opacity: .45 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

.accept_all_bar {
    margin: 10px 0 14px;
    text-align: right;
}

/* Built like the lab test summary's Approve button - same weight, padding and
   shadow, 6px corners - but violet rather than that one's magenta, because the
   two do different things and sit one page apart. Violet is also clear of
   everything on this screen: the green chrome, the orange refunded rows and the
   blue links. It refunds every approved item on screen, so it is meant to be
   found deliberately rather than brushed past. */
.accept_all_button {
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    background: #6d28d9;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
}

    .accept_all_button:hover {
        background: #5b21b6;
    }

    .accept_all_button[disabled] {
        background: #a99ec2;
        cursor: default;
        box-shadow: none;
    }

/* The short process dialog.

   It hosts forms written for a full page - the donor form alone is a table of
   190px inputs inside a box with 40px of padding on each side - while .popup is
   30% of the viewport, so the right-hand column was simply cut off. Wider, with
   the inner box left to size itself, and scrollbars rather than a clipped edge
   for anything wider or taller still. Scoped to this dialog so the popups these
   forms also appear in are untouched. */
/* Every step is now a section of this one dialog, so it is wide enough to hold
   the widest of them, and tall. The title and close stay put; the sections
   scroll beneath them.

   The overlay spans the whole window, side menu included, so centring in it
   put the left edge under the menu. ShortProcess.js places it in the space to
   the right of the menu when it opens; these are the fallback. */
#popupShortProcess .popup {
    width: 60%;
    max-width: 860px;
    min-width: 520px;
    margin: 30px auto;
    max-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#popupShortProcess .popup > .content_text {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

#popupShortProcess .padding20 {
    padding: 8px 4px;
}

/* Add / Edit Donor, outside the wizard. .popup is 30% of the window, and the
   donor form inside it is a fixed-width round_box with 40px of padding, so its
   labels wrapped and its right edge was cut off. Wide enough for the form,
   which sizes itself to its content in the middle. */
#popupAddDonor .popup {
    width: 46%;
    min-width: 560px;
    max-width: 760px;
    margin: 60px auto;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

#popupAddDonor .round_box {
    width: auto !important;
    float: none;
    display: table;
    margin-left: auto !important;
    margin-right: auto !important;
}

#popupAddDonor .padding40 {
    padding: 16px;
}

#popupShortProcess .round_box {
    width: auto !important;
}

#popupShortProcess .padding40 {
    padding: 16px;
}

#popupShortProcess .content_text {
    overflow-x: auto;
}

/* Every field in a blood bank dialog looks like a filter toolbar control.

   These dialogs host forms written for full pages - the wizard alone hosts
   four of them - and each came with its own idea of how tall a box is, so one
   dialog showed three or four different fields. The toolbar's 25px box is what
   people on this system already read as "a field", so that is what they all
   look like: same height, same border, same type.

   Widths are left alone. They are set per form, and a name deserves more room
   than an age - flattening them would make the forms worse, not more
   consistent. The exception is select, which main.css pins at a flat 100px:
   here it sizes to its widest option instead, so "INDIVIDUAL DONOR" is not cut
   in half. */
#popupShortProcess input[type="text"],
#popupAddDonor input[type="text"],
#popupAddScreening input[type="text"],
#popupAddBloodBank input[type="text"],
#popupAddCrossMatch input[type="text"],
#popupAddBloodRequisition input[type="text"],
#popupAssignToPatient input[type="text"],
#popupAnonymous input[type="text"],
#popupDonor input[type="text"],
#popupRefundToBloodBank input[type="text"],
#popupUpdateWaste input[type="text"],
#popupBloodBank input[type="text"],
#popupFridge input[type="text"],
#popupDrawer input[type="text"] {
    height: 25px;
    padding: 2px 6px;
    border: 1px solid #ced1d7;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
    font-family: SansRegular;
    font-size: 12px;
}

#popupShortProcess select,
#popupAddDonor select,
#popupAddScreening select,
#popupAddBloodBank select,
#popupAddCrossMatch select,
#popupAddBloodRequisition select,
#popupAssignToPatient select,
#popupAnonymous select,
#popupDonor select,
#popupRefundToBloodBank select,
#popupUpdateWaste select,
#popupBloodBank select,
#popupFridge select,
#popupDrawer select {
    height: 25px;
    padding: 2px 4px;
    border: 1px solid #ced1d7;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
    font-family: SansRegular;
    font-size: 12px;
    width: auto;
    min-width: 150px;
    max-width: 100%;
}

.emergency_item {
    color: tomato;
}
.free_item {
    color: blueviolet;
}


.return_item td {
    text-decoration: underline;
    color: #0e900e;
}

.text_heading {
    float: left;
    min-width: 100px;
    text-align: right;
    line-height: 20px;
}

.text_content {
    float: left;
    text-align: left;
    margin-left: 10px;
    line-height: 20px;
}

    .text_content::after {
        clear: both;
        display: table;
    }

/* SMART TIME styles */
.smart-time {
    position: relative;
}

.smt-input {
    width: 56px;
    height: 22px;
    line-height: 22px;
    font-size: 1em;
    padding: 4px 10px;
    border: 1px solid #eeeeee;
    outline: none;
}

.smt-suggestions {
    position: absolute;
    z-index: 1;
    border: 1px solid #eee;
    top: 33px;
    left: 0;
    width: 76px;
    background-color: #fff;
    box-shadow: 1px 3px 4px rgba(140, 140, 140, 0.4);
}

    .smt-suggestions ul {
        list-style: none;
        padding: 2px 2px;
        margin: 0;
    }

        .smt-suggestions ul li {
            display: block;
            padding: 2px 2px;
            line-height: 1.2em;
            height: 1.2em;
            font-size: 0.9em;
            cursor: pointer;
        }

            .smt-suggestions ul li.selected {
                background-color: rgba(102, 173, 255, 0.9);
            }

            .smt-suggestions ul li:hover {
                background-color: #eeeeee;
            }

.upperCase::first-letter {
    text-transform: uppercase;
}

table td.textalignright, table th.textalignright {
    text-align: right;
}

table.labreport td {
    padding: 2px;
}

.ReportDisplay {
    display: none;
}

.header {
    display: none;
}

.header_top {
    display: none;
}

table.selectPatient {
    margin-top: 22px;
}




    table.selectPatient td {
        padding: 8px;
    }


.rpt_name {
    display: none;
}

.approve_color {
    color: #c66c1c;
}

.signature_heading {
    font-weight: bold;
    font-size: 14px;
    padding-bottom: 4px;
}


p.payment_in_word {
    padding: 0;
    margin: 0;
    display: inline-block;
}

    p.payment_in_word:first-letter {
        text-transform: uppercase;
    }

.reconcile_check_box {
    float: right;
    margin-right: 118px;
}

.bulletlist h2 {
    padding: 4px;
    display: block;
}

.bulletlist div {
    padding: 4px;
}

input.bigtext {
    width: 430px;
}

pre.reset {
    /* defaults */
    display: block;
    white-space: pre;
    margin: 0px;
    /* bootstrap overrides */
    padding: 0px;
    line-height: initial;
    color: initial;
    background-color: initial;
    border: initial;
    overflow: initial;
    word-break: initial;
    word-wrap: initial;
    border-radius: initial;
}

.arrow-right {
    background-color: #e8e8e8;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
    font-size: 20px;
    position: relative;
    float: right;
}

    .arrow-right::after {
        content: '';
        width: 0px;
        height: 0px;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid #a3a8a3;
        position: absolute;
        clear: both;
        top: -45px;
        left: -40px;
    }

input[type="checkbox"].old_id:hover + div.oldid_title {
    display: block;
}

div.oldid_title {
    display: none;
    padding: 7px;
    border-color: darkgreen;
    padding-left: 16px;
    background-color: darkseagreen;
    border-radius: 4px;
    position: absolute;
    z-index: 9999;
    color: white;
    margin-top: 12px;
}

.tool_tip:hover + div.tooltip_text {
    display: block;
}

div.tooltip_text {
    display: none;
    padding: 7px;
    border-color: darkgreen;
    padding-left: 16px;
    padding-right: 16px;
    background-color: darkseagreen;
    border-radius: 4px;
    position: absolute;
    z-index: 9999;
    color: white;
    margin-top: 12px;
    max-width: 200px;
    line-height: 14px;
}

.arrow-up {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid darkseagreen;
    position: absolute;
    top: -8px;
    left: 6px;
}

span.leaf:hover div.account_head_inf {
    opacity: 100;
    animation: fade 2s linear;
}

div.account_head_inf {
    opacity: 0;
    padding: 20px;
    border-color: darkgreen;
    padding-left: 16px;
    background-color: darkseagreen;
    border-radius: 4px;
    position: absolute;
    z-index: 9999;
    color: white;
    margin-top: 12px;
    transition: all 2s ease-in-out;
}

.prescription .inner_right_border h2 {
    font-size: 13px;
    text-transform: none;
}

.inner_right_border {
    font-size: 13px;
}

.prescriptionclass h2 {
    font-size: 13px;
    text-transform: none;
}

.prescriptionclass div {
    color: #525652;
    font-size: 13px;
}

.rounded_div {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 25px;
    width: 25px;
    -moz-border-radius: 17px;
    border-radius: 17px;
    background-color: #146C6C;
    color: #fff;
    z-index: 5;
}

    .rounded_div p {
        padding: 4px 0px 0px 0px;
        vertical-align: middle;
        text-align: center;
    }

.appointment_box {
    position: relative;
    height: 45px;
}

.inline_block {
    display: inline-block;
}

.print_setting {
    margin-top: 4px;
    vertical-align: top;
    display: inline-block;
}

.no_header {
    visibility: hidden;
    display: none;
}

.with_header {
    visibility: visible;
}

.popup_online div.alert-danger {
    background: none;
    border: none;
    color: firebrick;
    position: relative;
}

.popup_online div.warning_text {
    display: inline-block;
    padding-left: 12px;
    top: 30px;
    position: absolute;
}

div.warning_text strong {
    color: firebrick;
}

.show_on_print {
    display: none;
    visibility: hidden;
}

.overlay1 {
    z-index: 9999;
}

tr.card_background {
    background-color: #000 !important;
    -webkit-print-color-adjust: exact;
}

.card_background td {
    color: white !important;
}

.card_background div {
    color: white !important;
}

.sansbold {
    font-size: 13px;
    font-family: SansBold;
}

.is_return {
    color: #cc0b41;
}

.is_refund {
    color: #c66c1c;
}

.in_patient {
    color: #c66c1c;
}

.out_patient {
    color: #29a914;
}

.disable_row {
    color: #bdbdbd;
}

.appointment_selected_color {
    background-color: #b36628;
}

/*Slider*/
.switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 20px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 13px;
        width: 13px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #538e4a;
}


    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

/* ==========================================================================
   clean_grid - the shared look for the big listing grids.

   Used by Lab Test > Summary, Lab Test > Sample List and Billing > Invoice.
   It is this one block plus three class names in the markup:

     clean_grid          on the <table>
     clean_grid_footer   on the pagination strip under it
     grid_chip + a tint  on each action icon in a row

   Delete this block and those names and the grids are exactly as they were;
   nothing else in the app uses them.

   Copied from the reference screenshot rather than pulled from a theme pack:
   none of them matches it, and a hospital screen should not depend on a
   stylesheet fetched from the internet. The icons are FontAwesome 6, already on
   the page, using its line glyphs - chevron, printer, file.

     card            #FFFFFF, rows alternating with #EEEEEE grey, rules #D6D6D6
     header          #ADB2C0 grey-lilac, black lettering; nested header #E9E9E9
     footer          #EFEFEF, shown only when there is more than one page
     action green    white on #1B8354
     attention amber white on #B54708
     quiet grey      #4B5563, no fill

   css/custom/custom.css loads after this file and sets .l-table th, .l-table td
   and .l-not-table th with !important - a black header bar, white lettering and
   2px/4px cell padding. Those are the three rules this grid has to beat, so the
   declarations that beat them are marked !important too. Nothing else here is.

   Sizing is for people who are not computer users, and for the uncongested
   look of the reference: 12.5px rows, 22px of air above and below every line,
   36px icon targets. Roomy on purpose - fewer records on a screen is the trade,
   and it is the right one for a screen read all day.
   ========================================================================== */

/* --- the card ----------------------------------------------------------- */

.clean_grid {
    background: #fff;
    margin-top: 8px;

    /* No outer border. The header band and the row rules already give the grid
       its edges; an outline round the whole thing only boxed them in again. */
    border: none;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

/* High-contrast outer headers shared by the Lab Test and Billing grids. */
.clean_grid > thead > tr > th {
    background: #000000 !important;
    color: #FFFFFF !important;
    /* SansBold, not SansSemiBold with font-weight: 700 - these are separate font
       faces, each at its own fixed weight, so asking the semibold face to be
       bolder did nothing. */
    font-family: SansBold, SansSemiBold;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .7px;
    text-transform: uppercase;
    text-align: left;
    height: auto;
    padding: 20px !important;
    border-bottom: 1px solid #99A0B0;
}

/* --- the rows ----------------------------------------------------------- */

/* Alternating, as in the reference. These grids put each record in its own
   tbody - the record and the detail table it opens - so the banding follows the
   record rather than the row, and an expanded record does not stripe against
   itself.

   custom.css bands them too, with a green tint on the tbody, and counts thead
   as a child - so its stripes land one record out of step with these and every
   record ended up carrying some tint. Its banding is turned off here and this
   one replaces it. */
.clean_grid.multi-tbody > tbody:nth-child(even),
.clean_grid > tbody:nth-child(even) {
    background-color: transparent !important;
}

.clean_grid > tbody:nth-of-type(even) > tr > td {
    background: #EEEEEE;
}

    .clean_grid > tbody:nth-of-type(odd) > tr > td {
        background: #dadadc;
    }

/* table.evencolor's own zebra needs no undoing: it paints the row, and these
   rules paint the cells, which sit on top of it. */
.clean_grid > tbody > tr > td {
    border-bottom: 1px solid #D6D6D6;
    padding: 6px 20px !important;
    font-size: 13px;
    color: #000000;
    vertical-align: middle;
}

/* The whole record lights up, not the one row the pointer is over. Set on the
   cells because .table-hover puts its own colour on the row. */
.clean_grid > tbody:hover > tr > td {
    background: #E4E4E4;
}

/* --- cell padding, the hard way ----------------------------------------- */

/* custom.css sets the padding on these tables from selectors three and four
   classes deep:

     .l-table.table-hover.multi-tbody tbody > tr td                    4px
     .l-table.table-hover.multi-tbody tbody > tr td > table.l-not-table
         tbody > tr td                                                10px

   both !important. The plain .clean_grid rules above never stood a chance, so
   the rows were 4px tall and only looked roomy where a 36px chip happened to
   prop them open - which is why Summary read as spacious and Sample List, with
   nothing but a chevron in the first cell, collapsed.

   These two repeat the whole chain with .clean_grid in front, which is the only
   thing that outranks them. Ugly, and the reason is worth knowing before anyone
   tries to simplify it. */
.clean_grid.l-table.table-hover.multi-tbody > tbody > tr > td {
    padding: 6px 20px !important;
}

.clean_grid.l-table.table-hover.multi-tbody tbody > tr td > table.l-not-table tbody > tr td,
.clean_grid.l-table.table-hover.multi-tbody tbody > tr td > table.small_header tbody > tr td {
    padding: 7px 18px !important;
}

/* --- keeping the grid inside the page ----------------------------------- */

/* The same wrapper the Item Wise report uses. Without it a grid too wide for
   its panel widens the document instead, and the page gains a horizontal
   scrollbar that takes the left menu off screen with it. */
.grid_scroll {
    width: 100%;
    overflow-x: auto;

    /* Room for the bar, so it sits below the table rather than over its last
       row. Only reserved when a bar is actually there - overflow-x: auto means
       no bar, and no gap, whenever the grid fits. */
    padding-bottom: 2px;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #ADB2C0 #EFEFEF;
}

/* A scrollbar worth noticing. The default is thin and nearly the colour of the
   page, which on a grid that only sometimes scrolls reads as nothing at all -
   the row just looks cut off. Sized and coloured from the grid's own palette:
   the header grey for the thumb, the footer grey for the track. */
.grid_scroll::-webkit-scrollbar {
    height: 12px;
}

.grid_scroll::-webkit-scrollbar-track {
    background: #EFEFEF;
    border-radius: 6px;
}

.grid_scroll::-webkit-scrollbar-thumb {
    background: #ADB2C0;
    border-radius: 6px;
    border: 2px solid #EFEFEF;
}

.grid_scroll::-webkit-scrollbar-thumb:hover {
    background: #8B93A5;
}

/* The operator who raised the invoice. Same face and colour as the rest of the
   row - it was inline blue, which read as a link you could click - and bold so
   it still carries. td.class because .clean_grid > tbody > tr > td sets the body
   colour with an element in the selector and would otherwise win. */
.clean_grid > tbody > tr > td.col_user_name {
    font-family: SansBold;
    color: #4B5563;
}

/* --- inner table column widths ------------------------------------------ */

/* The width attribute on these headers did nothing. The rest of that row is
   still sized in percentages which, added up, overcommit the table by a good
   margin, so the browser scales every column down proportionally and a pixel
   hint ends up far narrower - which is how "Random Blood Sugar (RBS)" came to
   sit on four lines.

   min-width is not a hint. In auto table layout a column cannot be narrower
   than the widest minimum among its cells, so this holds whatever the other
   columns ask for. On the cells rather than just the header, because the
   header is the short word of the two. */
/* The first data column of a detail table - the test on Lab Test, the item on
   Billing - in bold. It is the thing every other cell in that row is about, and
   the same rule across all three grids so a row reads the same way wherever you
   are. SansBold, not font-weight: these are separate families. */
.clean_grid .col_test_name,
.clean_grid .col_item_name {
    font-family: SansBold;
}

/* One colour for the row's subject on all three grids: deep teal, distinct from
   the #4B5563 the rest of the row is set in and clear of every status word and
   button colour already in play.

   The lab grids get their green from a .highLight span the server wraps the test
   name in, inside the cell - so the cell colour alone would not reach it. The
   second rule makes that span defer to the cell, which is what brings Lab Test
   and Billing into line. */
/* Written the long way round because ".clean_grid .small_header td" sets the
   body grey further down this file - one element more specific than a plain
   ".clean_grid .col_item_name", and later besides, so it won on both counts and
   this colour silently did nothing. td.class puts it level on specificity and
   ahead on the extra class. */
.clean_grid .l-not-table td.col_test_name,
.clean_grid .l-not-table td.col_item_name,
.clean_grid .small_header td.col_test_name,
.clean_grid .small_header td.col_item_name {
    color: #0D9DAA;
}

    /* The font as well as the colour: .highLight also sets SansSemiBold, which
       left the lab grids a weight lighter than Billing for the same column. */
    .clean_grid td.col_test_name .highLight,
    .clean_grid td.col_item_name .highLight {
        color: inherit;
        font-family: inherit;
    }

/* A checked test, on Lab Test. Green, and brighter than the teal the column is
   otherwise set in. The same green PRINTED uses rather than a new hue: the row
   already carries six colours and a seventh would be noise.

   One class more than the colour rule above, which it has to outrank; the
   highLight span inside follows it by inheritance. */
.clean_grid .l-not-table td.col_test_name.name_checked,
.clean_grid .small_header td.col_test_name.name_checked {
    color: #16A34A;
}

.clean_grid .col_test_name {
    min-width: 140px;
}

.clean_grid .col_sample_id {
    min-width: 90px;
}

/* Emphasize Lab Test and Billing identifiers. */
.clean_grid .col_invoice_id a {
    color: inherit;
}

.clean_grid.billing_invoice_grid .col_invoice_id a,
.clean_grid.labtest_sample_grid .col_invoice_id,
.clean_grid.labtest_sample_grid td.col_sample_id,
.clean_grid.labtest_summary_grid .col_invoice_id,
.clean_grid.labtest_summary_grid td.col_sample_id {
    font-family: SansBold, SansSemiBold;
    font-weight: 700;
}

/* --- cells that must not wrap ------------------------------------------- */

/* A timestamp reads as one thing, so it breaks badly: "20-09-2026 04:36" on one
   line and "PM" on the next. Marked on the cell rather than set on the whole
   column, because white-space inherits - on the expanded row the second cell is
   the one holding the detail table, and nowrap there would reach into every cell
   inside it. */
.clean_grid .cell_nowrap {
    white-space: nowrap;
}

/* --- filter_card: a filter bar built to match clean_grid ----------------- */

/* Every colour in this block is sampled from the reference render rather than
   chosen: band #EFEFEF, its border #D8DBD8, labels black, control borders
   #B7B7B7, control fill white. The Urgent red (#D63939) is inline on the
   templates, since an inline style is what those labels already carried.

   Put filter_card on a .criteria_box.filter_toolbar and the filter reads as the
   band above the grid rather than a row of loose controls: the grid geometry
   (10px radius, 20px side padding so the first control lines up with the DATE
   column), the grid header type for the labels, and the grid rule colour on
   every control border.

   The controls are white on a tinted band, which is the other way round from the
   grid - there the card is white and the header is tinted. That is deliberate:
   it keeps the filter from competing with the table while still belonging to it.

   Everything here re-states a rule from layout.css or bootstrap, which set these
   controls to 25px boxes with 4px padding. Same specificity, later file. */
.filter_card {
    background: #EFEFEF;
    border: 1px solid #D8DBD8;
    border-radius: 10px;
    padding: 16px 20px !important;
    margin-top: 8px;
    margin-bottom: 0;
}

    .filter_card .filter_bar {
        gap: 12px;
    }

/* The report filters are one long bar of controls rather than the Lab Test
   filter_bar/filter_group structure, so .filter_row is put straight on it. Flex
   with wrap does the aligning: everything sits on one baseline and spills to a
   second line together instead of each control floating where it lands.

   The labels on that bar are <h2 class="padding_left10">, whose left padding was
   doing the spacing before the gap existed and now just pushes them off centre. */
    .filter_card .searchbar-margin {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 14px;
    }

        .filter_card .searchbar-margin > h2.padding_left10 {
            padding-left: 0;
        }

/* Bootstrap makes .form-control width:100%. In a block container that was
   harmless; as a flex item it claims a whole row and pushes everything else onto
   the next line. A width of its own puts it back in the bar. Anything carrying an
   inline width - the user-name box - keeps it. */
        .filter_card .searchbar-margin .form-control {
            width: 200px;
        }

/* The date boxes are 100px by default, which is narrower than the text in them. */
        .filter_card .reportdeliverydate {
            width: 120px;
        }

    .filter_card .filter_row {
        gap: 10px 18px;
    }

/* The grid header, said quietly: same family and tracking, a step smaller and
   in the body grey, because a filter label is not a column heading. */
    .filter_card h2,
    .filter_card .filter_label {
        font-family: SansBold;
        font-size: 11.5px;
        letter-spacing: .6px;
        color: #000000;
        text-transform: uppercase;
        padding: 0;
        margin: 0;
        white-space: nowrap;
    }

    .filter_card select,
    .filter_card input[type="text"],
    .filter_card .form-control,
    .filter_card .reportdeliverydate {
        height: 32px;
        border: 1px solid #B7B7B7;
        border-radius: 6px;
        background: #fff;
        padding: 0 10px;
        font-family: SansRegular;
        font-size: 12.5px;
        color: #111827;
        margin: 0;
        box-sizing: border-box;
        font-weight:bold;
    }

/* main.css sizes this box by id at 95px, which no class rule can reach past.
   Re-stated at id specificity so the Sample ID box matches the others. */
    .filter_card #patientcode {
        width: 150px;
    }

/* Same again for the lab-test name box, which layout.css pins to 25px tall by
   id - it was the one control in the row at a different height. */
    .filter_card #itemname {
        width: 150px;
        height: 32px;
    }

/* Bootstrap squares off the corners of a .form-control inside an .input-group,
   so it can butt up against the addon beside it. Here the GO button is detached
   by a 6px gap and the Sample ID box has no addon at all, so there is nothing for
   them to butt against - they just looked like the one unrounded box in the row.
   :first-child/:last-child to outrank bootstrap's own. */
    .filter_card .input-group .form-control,
    .filter_card .input-group .form-control:first-child,
    .filter_card .input-group .form-control:last-child {
        border-radius: 6px;
    }

        .filter_card input[type="text"]:focus,
        .filter_card .form-control:focus {
            border-color: #1B8354;
            box-shadow: 0 0 0 3px rgba(27, 131, 84, .15);
            outline: none;
        }

/* GO, as the grid says green. layout.css gives .btn a 24px height and a grey
   gradient background.

   The green is unchanged; what makes it read as a button rather than a green
   rectangle is the rest: a top-lit gradient, a shadow it sits on, and an arrow
   saying which way the action goes. It presses in on click - the shadow
   collapses and it drops a pixel - which is the part that makes a button feel
   like one. */
    .filter_card .btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 32px;
        padding: 0 10px;
        border: none;

        border-radius: 4px;
        background: linear-gradient(180deg, #1B8E58 0%, #146945 100%);
        color: #fff;
        font-family: SansBold;
        font-size: 12px;
        letter-spacing: .4px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
        transition: background .15s, box-shadow .15s, transform .08s;
    }

/* Bootstrap squares off the left corners of a button that closes an input-group,
   so GO had two flat edges against the Inv. No box. Its selector scores a class
   higher than a plain .filter_card .btn - :last-child counts - so this needs the
   extra class to win rather than just coming later in the file. */
        .filter_card .input-group-btn:last-child > .btn {
            border-radius: 4px;
        }

/* The arrow, as a pseudo-element so no template has to carry an <i>. */
/* Not on the category dropdown: that button opens a list, it does not submit,
   and an arrow on it reads as "apply". */
        .filter_card .btn:not(.filter_toggle):after {
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 11px;
            line-height: 1;
            content: "\f061";
        }

        .filter_card .btn:hover {
            /* A different hue on hover, not a darker green: the button is green at
               rest, so changing shade barely registers against the grey band it
               sits on. Violet is the one colour in the palette that is loud and
               carries no warning - amber and red both read as caution on a button
               whose whole job is "apply this filter". */
            background: linear-gradient(180deg, #8B5CF6 0%, #6D28D9 100%);

            /* Lifts a pixel and casts a little further on hover, so the pointer
               being on it is felt rather than just seen. */
            box-shadow: 0 4px 9px rgba(16, 24, 40, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
            transform: translateY(-1px);
        }

        .filter_card .btn:active {
            /* Follows the hover, not the resting green - pressing must not look like
               the colour snapping back. */
            background: #5B21B6;
            box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25);
            transform: translateY(1px);
        }

        .filter_card .btn:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(27, 131, 84, .3), inset 0 1px 0 rgba(255, 255, 255, .18);
        }

/* The radios and boxes, scaled to sit with 32px controls. */
    .filter_card input[type="radio"],
    .filter_card input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin: 0;
        vertical-align: middle;
        accent-color: #1B8354;
        cursor: pointer;
    }

/* --- one row height across the grids ------------------------------------ */

/* A row on Summary or on Billing is propped open by its 36px chips; Sample List
   rows carry a bare chevron and nothing else, so the same padding left them
   noticeably shorter and the two tabs read as different designs.

   height on a cell behaves as a minimum, so this lifts the rows that have no
   chip in them and leaves every other row exactly where it was. */
.clean_grid > tbody > tr > td {
    height: 44px;
}

/* The same idea for the inner tables. What stands a detail row up differs by
   tab - Summary has the Enter Result button, Billing has Refund, Sample List has
   only a checkbox - so they came out at three different heights. A minimum
   lifts the short ones and leaves the rest alone. */
.clean_grid .l-not-table > tbody > tr > td,
.clean_grid .small_header > tbody > tr > td {
    height: 50px;
}

/* An expanded record is one block, so the rule under its top row would cut it
   in half. The detail row is ng-show, which means it is still in the DOM with
   class ng-hide when collapsed - hence :has() on a second row that is NOT
   hidden, rather than on a second row existing. */
.clean_grid > tbody:has(> tr + tr:not(.ng-hide)) > tr:first-child > td {
    border-bottom: none;
}

/* --- the action chips --------------------------------------------------- */

/* Each tint is written with both chip classes so it outranks the icon colours
   set elsewhere - table.bordered a.fa-print in layout.css, and the .fa.fa-edit
   family in custom.css. Hover happened to outrank them already, which is why the
   chips looked right under the pointer and washed out at rest.

   One shape, one size, colour by meaning - the reference gives every action a
   tinted rounded square and nothing else. These were bare glyphs at two and
   three times the size of the text beside them, all the same blue whatever they
   did. */
.clean_grid .grid_chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    transition: background .15s, color .15s;
}

.clean_grid .grid_chip + .grid_chip {
    margin-left: 10px;
}

/* Opening a record. The glyph and nothing else - no fill, no box. It is not an
   action, it just turns the row over, so it should not look like the two chips
   that do something. A little larger than the row text to stay easy to hit. */
.clean_grid .grid_chip.grid_chip_neutral {
    display: inline;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #4B5563;
    font-size: 16px;
    cursor: pointer;
}

.clean_grid > tbody:hover .grid_chip.grid_chip_neutral {
    background: transparent;
    color: #111827;
}

/* Printing - the routine, safe action, in the reference green. Filled by
   default: a tint reads as a label, and these are buttons people press all day. */
/* The invoice-level print, which opens every approved report on the invoice at
   once. It was the same green as the per-test print inside the detail table, so
   two buttons that do quite different things looked identical. Indigo is the one
   hue the row does not already use - orange is review, green is print one,
   magenta is approve. Violet, not the navy-indigo tried first, which sat too
   close to the grey-blue header to stand out.

   Two classes, like the others here, to outrank table.bordered a.fa-print. */
.clean_grid .grid_chip.grid_chip_violet {
    background: #7C3AED;
    color: #fff;
}

.clean_grid .grid_chip.grid_chip_violet:hover {
    background: #6D28D9;
}

.clean_grid .grid_chip.grid_chip_print {
    background: #2563EB;
    color: #fff;
}

.clean_grid .grid_chip.grid_chip_print:hover {
    background: #1D4ED8;
    color: #fff;
}

.clean_grid .grid_chip.grid_chip_green {
    background: #1B8354;
    color: #fff;
}

.clean_grid .grid_chip.grid_chip_green:hover {
    background: #14603E;
    color: #fff;
}

/* Review and approve - something waiting on a person. Amber rather than the
   reference salmon: salmon is its delete colour, and nothing on these grids
   deletes anything. */
.clean_grid .grid_chip.grid_chip_blue {
    background: #B54708;
    color: #fff;
}

.clean_grid .grid_chip.grid_chip_blue:hover {
    background: #8A3606;
    color: #fff;
}

/* --- the nested detail table -------------------------------------------- */

/* The gap between the two tables. Without it the inner table runs into the
   edges of the record that owns it and the two read as one confused grid. */
.clean_grid > tbody > tr > td > table {
    margin: 12px 0 22px;
}

.clean_grid > tbody > tr > td:has(> table) {
    padding-right: 20px;
}

.clean_grid .l-not-table,
.clean_grid .small_header {
    background: #fff;
    border: 1px solid #b0b4b9;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .10);
    overflow: hidden;
}

    .clean_grid .l-not-table th,
    .clean_grid .small_header th {
        background: #d7d8db !important;
        color: #000000 !important;
        font-weight: 700;
        font-size: 11.5px;
        letter-spacing: .6px;
        text-align: left;
        height: auto !important;
        padding: 16px 18px !important;
        border-bottom: 1px solid #E4E7EC;
    }

.clean_grid .l-not-table td,
.clean_grid .small_header td {
    border-bottom: 1px solid #ECECEC;
    padding: 7px 18px !important;
    font-size: 12.5px;
    color: #000000;
    background: #fff;
}

.clean_grid .l-not-table > tbody:nth-of-type(even) > tr > td,
.clean_grid .small_header > tbody:nth-of-type(even) > tr > td {
    background: #F7F7F7;
}

/* Nothing under the last one - the card edge already closes it. */
.clean_grid .l-not-table > tbody:last-child > tr:last-child > td,
.clean_grid .small_header > tbody:last-child > tr:last-child > td {
    border-bottom: none;
}

/* --- inner tables of plain text ----------------------------------------- */

/* Billing > Invoice lists items, not actions, so its inner rows are text and a
   small button. Lab Test rows are propped open by the 36px chips, so the shared
   padding that suits them leaves these looking squashed next to everything else
   on the page.

   The chain is repeated because the selector this has to beat lives in
   custom.css - see the note further up. */
.clean_grid.l-table.table-hover.multi-tbody tbody > tr td > table.l-not-table.roomy_rows tbody > tr td {
    padding: 13px 18px !important;
}

/* REFUND REQUEST SENT, as a badge rather than coloured words.

   It sat inside a status_green span, so it first came out the same azure as
   COMPLETED - a request waiting on somebody reading as a finished state. Amber
   fixed the meaning but not the weight: every other row in that column carries a
   solid Refund button, so plain text there reads as nothing at all.

   Filled amber with a clock, sized like the buttons it sits among, so the column
   scans as "button, button, waiting" instead of "button, button, some words".

   Marked and written as span.class because it is nested inside the status_green
   span rather than replacing it, so the parent would otherwise win by being the
   later rule. */
.clean_grid span.status_refund_requested {
    color: #dd5a09 !important;
    font-family: SansBold;
}

/* --- a refunded line inside a detail table ------------------------------ */

/* .refund_item already strikes the row through and colours it, but that rule is
   two selectors short of the clean_grid cell rules, so inside these grids only
   the strikethrough survived - the row read as ordinary text with a line through
   it, and the item name still sat there in teal as though it were live.

   Grey, not another red: the row is void, and the REFUNDED label beside it is
   already red and carries the signal. Greying it lets the eye pass over the line
   that no longer counts and land on the ones that do.

   The long selectors are what it takes to beat td.col_item_name, which is four
   classes deep by itself. */
.clean_grid .l-not-table > tbody > tr.refund_item > td,
.clean_grid .small_header > tbody > tr.refund_item > td,
.clean_grid .l-not-table > tbody > tr.refund_item > td.col_item_name,
.clean_grid .small_header > tbody > tr.refund_item > td.col_item_name,
.clean_grid .l-not-table > tbody > tr.refund_item > td.col_test_name,
.clean_grid .small_header > tbody > tr.refund_item > td.col_test_name {
    color: #8A8F98;
}

/* The name is wrapped in a .highLight span on the lab grids, which carries its
   own colour and would otherwise stay green on a voided line. */
    .clean_grid > tbody > tr > td tr.refund_item .highLight {
        color: inherit;
    }

/* --- an invoice with a refund on it ------------------------------------- */

/* Set when ANY line inside has been refunded or has a refund request against it,
   which the invoice's own IsRefunded flag does not cover - one refunded line out
   of four leaves that false, and the row read as ordinary.

   The whole row goes red so it is spotted while collapsed, without having to
   open it to find out. Cells that carry their own colour keep it: the status
   word, the operator, and the chips are all set further down this file with
   selectors that outrank this one, which is deliberate - this colours the plain
   text, not everything.

   td, not the tr: .clean_grid > tbody > tr > td sets the body colour with an
   element in the selector, so a colour on the row alone would never reach the
   cells. */
.clean_grid > tbody > tr.row_refund_activity > td {
    color: #C81E1E;
}

/* --- status words ------------------------------------------------------- */

/* Sizes and spacing made consistent, so PENDING and COMPLETED read as the same
   kind of thing said about different records.

   status_blue - COLLECTED - is the one colour changed. #26a6e1 was a pale sky
   blue that barely held against white; violet is the one hue on the row not
   already spoken for - red is pending, green is completed and approved, amber is
   checked and printed - so it is found without being read. COMPLETED moves off
   green for the same reason. Both are scoped to this grid,
   so the same class keeps its old colour everywhere else it is used. */
.clean_grid .status_blue {
    color: #7C3AED;
}

/* COMPLETED, which was #538e4a - a muted olive green that sat too close to the
   green used for APPROVED to tell the two apart at a glance. Teal-cyan still
   reads as a finished, good state without being another green. */
.clean_grid .status_green {
    color: #0284C7;
}

/* PRINTED used to share status_green with COMPLETED, so the two read as the
   same state. It keeps that class for its size and casing and only takes the
   colour from here. Green rather than another cool hue: the cool end of the row
   is already busy - azure completed, violet collected - and PRINTED and PENDING
   both start with a P, so they are kept as far apart in colour as possible. */
.clean_grid .status_printed {
    color: #16A34A;
}

/* All of them bold. These fonts are separate families rather than weights of
   one, so font-weight: 700 does nothing here - SansBold is the bold. */
.clean_grid .status_blue,
.clean_grid .status_green,
.clean_grid .status_printed,
.clean_grid .status_red,
.clean_grid .status_brown,
.clean_grid .status_black,
.clean_grid .link_brown,
.clean_grid .link_green {
    font-family: SansBold;

    /* The group was split between 11px and 12px, so the same kind of word was
       set two sizes depending on which class carried it. One size now, a pixel
       above the larger of the two. */
    font-size: 13px;
}

.clean_grid .link_brown,
.clean_grid .link_green,
.clean_grid .status_red {
    font-size: 13px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* APPROVED, now that it shares a cell with the status word and CHECKED.

   It was plain green, a shade off the green PRINTED already uses, so the two
   ran together in a stack where they often appear one above the other. Magenta
   is the colour of the Approve button that produces this state, which is the
   one pairing in the row that means something rather than just being distinct.

   Marked because layout.css sets .link_green from a plain class and would
   otherwise win on source order. */
.clean_grid .status_approved {
    color: #D243A6 !important;
}

/* CLOSED on the invoice grid.

   Every unrefunded invoice carried status_green, so CLOSED and OPEN - a bill
   settled and a bill still owing - read as the same azure. They are the two
   states an operator scans that column for, so they are the two that most need
   telling apart.

   Violet, and it wins by coming after status_green here with the same weight.
   The class is added alongside status_green rather than replacing it, so an
   invoice that is both closed and refunded still turns red - refunded is the
   more urgent thing to say. */
.clean_grid .status_closed {
    color: #881EA4;
}

.clean_grid .status_red.status_closed {
    color: #e30d21;
}

/* --- Enter Result / View Result ----------------------------------------- */

/* The green action button from the reference: solid fill, white label, a glyph
   on the left. custom.css makes these blue with !important via
   ".enterResult.link_brown", so the fill and the colour are marked too - see the
   note at the top of this block.

   The icon is a pseudo-element rather than markup: these anchors are written in
   several places and one CSS rule is easier to keep true than five templates. */
.clean_grid a.enterResult,
.clean_grid a.viewResult {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1B8354 !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 9px 14px !important;
    /* Marked: these anchors also carry link_brown, and layout.css styles that
       from table.bordered a.link_brown - one class-and-element more specific than
       anything starting .clean_grid a, so it won the font and the size. */
    font-family: SansBold !important;
    font-size: 12.5px !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .15s;
}

.clean_grid a.enterResult:hover,
.clean_grid a.viewResult:hover {
    background: #14603E !important;
}

.clean_grid a.enterResult:before,
.clean_grid a.viewResult:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    content: "\f044";
}

/* --- Refund / Refund All ------------------------------------------------ */

/* The Enter Result button, in the same green, with an undo arrow in place of the
   pencil - one button shape across the grids rather than the old blue pill from
   custom.css. That rule is a.link_brown with !important on the padding, radius
   and colour, so those are marked here too. */
.clean_grid a.refund_button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1B8354 !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 9px 14px !important;
    /* Marked: these anchors also carry link_brown, and layout.css styles that
       from table.bordered a.link_brown - one class-and-element more specific than
       anything starting .clean_grid a, so it won the font and the size. */
    font-family: SansBold !important;
    font-size: 12.5px !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap;
    margin: 3px 0;
    transition: background .15s;
}

.clean_grid a.refund_button:hover {
    background: #14603E !important;
}

.clean_grid a.refund_button:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    content: "\f0e2";
}

/* --- Accept All / Accept Refund Approval -------------------------------- */

/* The Refund button in blue, with a double tick.

   These were plain inline anchors carrying vertical padding, and vertical
   padding on an inline box does not add to the line height - so their blue
   background painted over whatever sat on the line above, which is why Accept
   All appeared to sit on top of Refund All. An inline-flex box is atomic: its
   whole height counts, so the line makes room for it and nothing overlaps.
   nowrap keeps "Accept Refund Approval" on one line. */
.clean_grid a.accept_button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1D4ED8 !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 9px 14px !important;
    font-family: SansBold !important;
    font-size: 12.5px !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap;
    vertical-align: middle;
    /* The column is narrow enough that Refund All and Accept All stack. The
       vertical margin keeps them off each other when they do, and pairs with
       Refund's own to make a 6px gap; the left margin spaces them when they fit
       side by side. */
    margin: 3px 0 3px 8px;
    transition: background .15s;
}

.clean_grid a.accept_button:hover {
    background: #1739A6 !important;
}

.clean_grid a.accept_button:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    content: "\f560";
}

/* Accept All sits directly under Refund All and acts on the whole invoice, so it
   gets its own colour rather than the blue of the per-row accept. Amber against
   the green above it - the two are told apart at a glance, which matters when
   one refunds everything and the other approves everything. */
.clean_grid a.accept_button.accept_button_alt {
    background: #D97706 !important;
}

.clean_grid a.accept_button.accept_button_alt:hover {
    background: #B45309 !important;
}

/* --- Unapprove ---------------------------------------------------------- */

/* The View/Edit Result button in the orange Unapprove already had, with a
   circle-slash for the glyph - it revokes rather than does. All of this was
   inline before, including font-weight: bold, which did nothing: these
   typefaces are separate families, so bold is SansBold. */
.clean_grid a.unapprove_button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FF8000 !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 9px 14px !important;
    font-family: SansBold;
    font-size: 12.5px;
    text-decoration: none !important;
    white-space: nowrap;
    vertical-align: middle;
    transition: background .15s;
}

.clean_grid a.unapprove_button:hover {
    background: #CC6600 !important;
}

.clean_grid a.unapprove_button:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    content: "\f05e";
}

/* --- Payment ------------------------------------------------------------ */

/* The Refund button in teal, with a card for the glyph. Teal is what is left
   once green is refund, blue is accept, amber is accept-all and magenta is
   approve - and taking money in should not look like paying money out. */
.clean_grid a.payment_button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0D9488 !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 9px 14px !important;
    font-family: SansBold !important;
    font-size: 12.5px !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap;
    vertical-align: middle;
    margin: 3px 0 3px 8px;
    transition: background .15s;
}

.clean_grid a.payment_button:hover {
    background: #0A6F67 !important;
}

.clean_grid a.payment_button:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    content: "\f09d";
}

/* --- Approve ------------------------------------------------------------ */

/* The Enter Result button in the colour Approve already had, with a tick for
   the glyph. It used to carry all of this inline, including font-weight: 700,
   which did nothing - these typefaces are separate families, so bold is
   SansBold and nothing else. */
.clean_grid a.approve_button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #D243A6 !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 9px 14px !important;
    font-family: SansBold;
    font-size: 12.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
    vertical-align: middle;
    transition: background .15s;
}

.clean_grid a.approve_button:hover {
    background: #AE3189 !important;
}

.clean_grid a.approve_button:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    content: "\f00c";
}

/* --- the footer --------------------------------------------------------- */

/* The reference closes its card with a band the width of the table. This is the
   pagination strip, which was floating loose underneath. The negative top margin
   folds the two borders into one line so the card reads as a single object. */
.clean_grid_footer {
    background: #EFEFEF;
    border: 1px solid #E2E2E2;
    border-radius: 0 0 10px 10px;
    padding: 9px 16px;
    margin-top: -1px;
    margin-bottom: 24px;
}

.clean_grid_footer .pagination {
    margin: 0;
}

/* Pills, like the buttons along the bottom of the reference. */
.clean_grid_footer .pagination > li {
    display: inline-block;
    vertical-align: middle;
}

.clean_grid_footer .pagination > li > a,
.clean_grid_footer .pagination > li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #D7DBE3;
    border-radius: 6px;
    margin-left: 5px;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    line-height: 1;
    color: #4B5563;
    font-size: 12.5px;
}

.clean_grid_footer .pagination > li > a:hover {
    border-color: #1B8354;
    background: #E7F5EE;
    color: #1B8354;
}

.clean_grid_footer .pagination > .active > a,
.clean_grid_footer .pagination > .active > span,
.clean_grid_footer .pagination > .active > a:hover,
.clean_grid_footer .pagination > .active > span:hover {
    background: #1B8354;
    border-color: #1B8354;
    color: #fff;
}

.clean_grid_footer .pagination > .disabled > a,
.clean_grid_footer .pagination > .disabled > span {
    background: #FAFBFC;
    color: #C0C6D0;
}